查看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>
|