من اجمل الاكود في التصميم البوم الصورة بلغة CSS3

السلام عليكم ورحمة الله

سحب الصورة باستخدام الرسوم المتحركة keyframe CSS3

كود

</head>
<style>

.pulloutimage{
position: relative;
}

.pulloutimage img{
position: absolute;
left: 0;
}

.pulloutimage img.ondemand{
opacity: 0;
visibility: hidden;
}

.pulloutimage img.original{
z-index: 1;
}

@-webkit-keyframes revealfromright{
0%{
z-index: -1;
opacity: 0;
}
50%{
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{
z-index: 2;
}
100%{
left: 0;
box-shadow: 8px 8px 15px gray;
}
}

@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

.pulloutimage:hover img.ondemand{
-webkit-animation-name:revealfromright;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;

-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;

-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;

animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;

visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;
z-index:2;
}

.pulloutimage:hover img.original{
opacity:0.5;
}

</style>

<body>

<div class="pulloutimage" style="width:298px; height:223px">
<img class="original" src="http://fantasyflash.ru/anime/bird/image/bird6.gif" />
<img class="ondemand" src="http://director.montada.com/montada_icons/197/forum_new.gif" />
</div>

<br />
<div class="pulloutimage" style="width:263px; height:199px">
<img class="ondemand" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQLh1TR3vc8eH-j9TpZK4iDgGoY5PQ3-zHLtonSBaAlbI2ZBed7" />
<img class="original" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRYd6Z1O2SaPfNGaSK60W1KydnQt-mwXvMebArpgLeTXMXI4tX2" />
</div>

</body>

مكتب ديكور و تشطيب (شركه عقاري للتشطيبات والديكور)

تقدم احدث الموديلات

…

[ قراءة كاملة ]

شركات ديكور في المهندسين ( عقاري للاسكان 01020115119)

تقدم شركة عقاري للاسكان …

[ قراءة كاملة ]

سأتحدث عن الإيمان الكامل بان
ما يحرمه الله عن البشر ..

فهو بالتأكيد لمصلحة البشر …

[ قراءة كاملة ]