Wednesday, December 19, 2012

Tutorial : Image Hover #5

Tumblr_ly59rxm8qq1qiudzqo1_500_large
LIVE PREVIEW
Tutorial hari ni untuk image hover.. image tu berpusing bila cursor dekat dengan nya :D
Rasanya korang dah pandaikan code2 image ni? So. tak yah lagi lah atin nk ajar korang...
sebab atin dah terikut stlye wana pulak ><
  • Blogskins/ Classic template : Paste codes ni sebelum code </style>
  • Template designer : Paste codes ni sebelum ]]></b:skin> 
<style>
img:hover{
-webkit-animation-name: MMCa2;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}
@-moz-keyframes MMCa2 /* Firefox*/
{
{ -ms-transform:: translate(0px, 0px) rotate(0deg); }
 50% { -moz-transform:  translate(0px, 0px) rotate(360deg); }
}
@-ms-keyframes MMCa2 /* IE9*/
{
  0% { -ms-transform: translate( 0px, 0px) rotate(0deg); }
 50% { -ms-transform: translate( 0px, 0px) rotate(360deg); }
}
@-webkit-keyframes MMCa2 /* Safari and Chrome */
{
  0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 50% { -webkit-transform: translate(0px, 0px) rotate(360deg); }
}
</style>

2 comments:

Anonymous said...

Тhiѕ ѕіte was...
how dο you say it? Relevant!! Finally I've found something that helped me. Thanks!

my site :: Chat Forums

Anonymous said...

Awesome article.

Also νiѕit my ωebsite - chatrulet