查看DEMO
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
先来认识一下css3的animation
animation的简写animation: name duration timing-function delay iteration-count direction;
其次就是@keyframes
好了,接下来运用上述两个属性做一个可以旋转的齿轮
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
| <style> .img { margin: 0 auto; text-align: center; width: 400px; height: 400px; padding: 0;
animation-name:myrotate; animation-duration:3s; animation-timing-function:linear; animation-delay:0s; animation-iteration-count:infinite; animation-direction:normal; animation-play-state:running;
-moz-animation-name:myrotate; -moz-animation-duration:3s; -moz-animation-timing-function:linear; -moz-animation-delay:0s; -moz-animation-iteration-count:infinite; -moz-animation-direction:normal; -moz-animation-play-state:running;
-webkit-animation-name:myrotate; -webkit-animation-duration:3s; -webkit-animation-timing-function:linear; -webkit-animation-delay:0s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:normal; -webkit-animation-play-state:running;
-o-animation-name:myrotate; -o-animation-duration:3s; -o-animation-timing-function:linear; -o-animation-delay:0s; -o-animation-iteration-count:infinite; -o-animation-direction:normal; -o-animation-play-state:running; } @keyframes myrotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } @-moz-keyframes myrotate { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(360deg);} } @-webkit-keyframes myrotate { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @-o-keyframes myrotate { from {-o-transform: rotate(0deg);} to {-o-transform: rotate(360deg);} } </style>
<div class="img"> <img src="chilun.png" alt=""> </div>
|