Z i c m a . C o d e & L a b e l

ลำดับตอนที่ #15 : ` โค้ด ♔ ชี้ภาพแล้วสั่นงึกงึกงึก

Z I C M A . C O D E
f o r. p i c t u r e
d e s . 31 / 03 / 14

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
โค้ดนี้ชี้แล้วภาพสั่นๆ หมุ่นๆ อย่างเร็วๆ
น่ารักมว๊ากกกกกกกกกก



EX. ตัวอย่าง

<style type="text/css">

img{

-webkit-transition: 1.0s!important;

-moz-transition: 1.0s!important;}

 

img:hover{

-webkit-animation: rotatee .5s alternate linear;

-webkit-transition: 1.0s!important;

-moz-transition: 1.0s!important;

}

 

@-webkit-keyframes rotatee {

 

10% {

    -webkit-transform: rotate(10deg);

    -moz-transform: rotate(10deg);

    -o-transform: rotate(10deg);

    -ms-transform: rotate(10deg);

    }

 

 

20% {

    -webkit-transform: rotate(-10deg);

    -moz-transform: rotate(50deg);

    -o-transform: rotate(50deg);

    -ms-transform: rotate(50deg);

    }

    

50% {

    -webkit-transform: rotate(-180deg);

    -moz-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    }

    

75% {

    -webkit-transform: rotate(-10deg);

    -moz-transform: rotate(-8deg);

    -o-transform: rotate(-8deg);

    -ms-transform: rotate(-8deg);

    }

  

80% {

    -webkit-transform: rotate(10deg);

    -moz-transform: rotate(10deg);

    -o-transform: rotate(10deg);

    -ms-transform: rotate(10deg);

    }

 

  

100% {

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    }

}</style>

นำไปใช้กรุณาให้เครดิต
❝ z i c m a

T
B