effek putaran pada gambar yang sedang diarahkan pada suatu gambar ini sangatlah memberikan kesan menarik suatu pengunjung website tentunya.
Animasi tersebut di buat dengan menggunakan dengan CSS (Cascading Style Sheet), berikut di bawah ini gambaran mengenai source yang yang digunakan :
style.css
@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(1) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}
a.advert {
width:35px;
height:35px;
display:block;
text-indent:-3000px;
}
a.advert:hover {
/* safari / chrome */
-webkit-animation-name:rotater;
-webkit-animation-duration:500ms;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-out;
/* mozilla */
-moz-transform:rotate(360deg) scale(1);
-moz-transition-duration:500ms;
-moz-transition-timing-function: ease-out;
/* opera */
-o-transform:rotate(360deg) scale(2);
-o-transition-duration:500ms;
-p-transition-timing-function: ease-out;
/* ie */
-ms-transform:rotate(360deg) scale(2);
-ms-transform-duration:500ms;
-ms-transform-timing-function: ease-out;
}
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(1) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}
a.advert {
width:35px;
height:35px;
display:block;
text-indent:-3000px;
}
a.advert:hover {
/* safari / chrome */
-webkit-animation-name:rotater;
-webkit-animation-duration:500ms;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-out;
/* mozilla */
-moz-transform:rotate(360deg) scale(1);
-moz-transition-duration:500ms;
-moz-transition-timing-function: ease-out;
/* opera */
-o-transform:rotate(360deg) scale(2);
-o-transition-duration:500ms;
-p-transition-timing-function: ease-out;
/* ie */
-ms-transform:rotate(360deg) scale(2);
-ms-transform-duration:500ms;
-ms-transform-timing-function: ease-out;
}
index.html
<html>
<body>
<div style="width:40px;float:left;overflow:hidden;height:40px;margin-right:0px;">
<a href="#" class="advert" style="background:url(images/facebook.png) 0 0 no-repeat;">
</a>
<div>
</body>
</html>
Klik Here to Demo<body>
<div style="width:40px;float:left;overflow:hidden;height:40px;margin-right:0px;">
<a href="#" class="advert" style="background:url(images/facebook.png) 0 0 no-repeat;">
</a>
<div>
</body>
</html>
Klik Here to Download
Tweet
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
