CSS3 动画齿轮

在今天的课程中，我们使用CSS3制作一个动画齿轮效果，效果看起来非常漂亮。其中我使用了CSS3关键帧、动画和转换（旋转），为了得到这个结果，请注意：只有在火狐Firefox浏览器、谷歌Chrome或者Safari（webkit引擎），才能看到这个效果。

点击此处查看DEMO

Step1.HTML
像往常一样，我们开始使用HTML。有简单的DIV元素。
index.html

1. <div class="container">
   
2. <div class="gear" id="gear1"></div>
   
3. <div class="gear" id="gear2"></div>
   
4. <div class="gear" id="gear3"></div>
   
5. <div class="gear" id="gear4"></div>
   
6. <div class="gear" id="gear5"></div>
   
7. <div class="gear" id="gear6"></div>
   
8. <div class="gear" id="gear7"></div>
   
9. </div>

复制代码
Step 2. CSS
这里是我们的动画齿轮的CSS样式。
css/layout.css

1. *{
   
2. margin:0;
   
3. padding:0;
   
4. }
   
5. body {
   
6. font:14px/1.3 Arial,sans-serif;
   
7. }
   
8. header {
   
9. background-color:#212121;
   
10. box-shadow: 0 -1px 2px #111111;
    
11. color:#fff;
    
12. display:block;
    
13. height:70px;
    
14. position:relative;
    
15. width:100%;
    
16. z-index:100;
    
17. }
    
18. header h2{
    
19. font-size:22px;
    
20. font-weight:normal;
    
21. left:50%;
    
22. margin-left:-400px;
    
23. padding:22px 0;
    
24. position:absolute;
    
25. width:540px;
    
26. }
    
27. header a.stuts,a.stuts:visited{
    
28. border:none;
    
29. text-decoration:none;
    
30. color:#fcfcfc;
    
31. font-size:14px;
    
32. left:50%;
    
33. line-height:31px;
    
34. margin:23px 0 0 110px;
    
35. position:absolute;
    
36. top:0;
    
37. }
    
38. header .stuts span {
    
39. font-size:22px;
    
40. font-weight:bold;
    
41. margin-left:5px;
    
42. }
    
43. .container {
    
44. background: url('../images/bg.jpg') repeat scroll 0 0 transparent;
    
45. height: 548px;
    
46. margin: 30px auto;
    
47. width: 450px;
    
48. position:relative;
    
49. }
    
50. 
    
51. /* CSS3 keyframes */
    
52. @-webkit-keyframes ckw {
    
53. 0% {
    
54. -moz-transform: rotate(0deg);
    
55. -webkit-transform: rotate(0deg);
    
56. }
    
57. 100% {
    
58. -moz-transform: rotate(360deg);
    
59. -webkit-transform: rotate(360deg);
    
60. }
    
61. }
    
62. @-moz-keyframes ckw {
    
63. 0% {
    
64. -moz-transform: rotate(0deg);
    
65. -webkit-transform: rotate(0deg);
    
66. }
    
67. 100% {
    
68. -moz-transform: rotate(360deg);
    
69. -webkit-transform: rotate(360deg);
    
70. }
    
71. }
    
72. @-webkit-keyframes cckw {
    
73. 0% {
    
74. -moz-transform: rotate(360deg);
    
75. -webkit-transform: rotate(360deg);
    
76. }
    
77. 100% {
    
78. -moz-transform: rotate(0deg);
    
79. -webkit-transform: rotate(0deg);
    
80. }
    
81. }
    
82. @-moz-keyframes cckw {
    
83. 0% {
    
84. -moz-transform: rotate(360deg);
    
85. -webkit-transform: rotate(360deg);
    
86. }
    
87. 100% {
    
88. -moz-transform: rotate(0deg);
    
89. -webkit-transform: rotate(0deg);
    
90. }
    
91. }
    
92. 
    
93. /* gears */
    
94. .gear {
    
95. float: none;
    
96. position: absolute;
    
97. text-align: center;
    
98. 
    
99. -moz-animation-timing-function: linear;
    
100. -moz-animation-iteration-count: infinite;
     
101. -moz-animation-direction: normal;
     
102. -moz-animation-delay: 0;
     
103. -moz-animation-play-state: running;
     
104. -moz-animation-fill-mode: forwards;
     
105. 
     
106. -webkit-animation-timing-function: linear;
     
107. -webkit-animation-iteration-count: infinite;
     
108. -webkit-animation-direction: normal;
     
109. -webkit-animation-delay: 0;
     
110. -webkit-animation-play-state: running;
     
111. -webkit-animation-fill-mode: forwards;
     
112. }
     
113. #gear1 {
     
114. background: url('../images/g1.png') no-repeat 0 0;
     
115. height: 85px;
     
116. left: 31px;
     
117. top: 45px;
     
118. width: 85px;
     
119. 
     
120. -moz-animation-name: ckw;
     
121. -moz-animation-duration: 10s;
     
122. 
     
123. -webkit-animation-name: ckw;
     
124. -webkit-animation-duration: 10s;
     
125. }
     
126. #gear2 {
     
127. background: url('../images/g2.png') no-repeat 0 0;
     
128. height: 125px;
     
129. left: 105px;
     
130. top: 10px;
     
131. width: 125px;
     
132. 
     
133. -moz-animation-name: cckw;
     
134. -moz-animation-duration: 16.84s;
     
135. 
     
136. -webkit-animation-name: cckw;
     
137. -webkit-animation-duration: 16.84s;
     
138. }
     
139. #gear3 {
     
140. background: url('../images/g3.png') no-repeat 0 0;
     
141. height: 103px;
     
142. left: 149px;
     
143. top: 118px;
     
144. width: 103px;
     
145. 
     
146. -moz-animation-name: ckw;
     
147. -moz-animation-duration: 13.5s;
     
148. 
     
149. -webkit-animation-name: ckw;
     
150. -webkit-animation-duration: 13.5s;
     
151. }
     
152. #gear4 {
     
153. background: url('../images/g4.png') no-repeat 0 0;
     
154. height: 144px;
     
155. left: 46px;
     
156. top: 173px;
     
157. width: 144px;
     
158. 
     
159. -moz-animation-name: cckw;
     
160. -moz-animation-duration: 20.2s;
     
161. 
     
162. -webkit-animation-name: cckw;
     
163. -webkit-animation-duration: 20.2s;
     
164. }
     
165. #gear5 {
     
166. background: url('../images/g1.png') no-repeat 0 0;
     
167. height: 85px;
     
168. left: 127px;
     
169. top: 292px;
     
170. width: 85px;
     
171. 
     
172. -moz-animation-name: ckw;
     
173. -moz-animation-duration: 10s;
     
174. 
     
175. -webkit-animation-name: ckw;
     
176. -webkit-animation-duration: 10s;
     
177. }
     
178. #gear6 {
     
179. background: url('../images/g2.png') no-repeat 0 0;
     
180. height: 125px;
     
181. left: 200px;
     
182. top: 283px;
     
183. width: 125px;
     
184. 
     
185. -moz-animation-name: cckw;
     
186. -moz-animation-duration: 16.84s;
     
187. 
     
188. -webkit-animation-name: cckw;
     
189. -webkit-animation-duration: 16.84s;
     
190. }
     
191. #gear7 {
     
192. background: url('../images/g3.png') no-repeat 0 0;
     
193. height: 103px;
     
194. left: 277px;
     
195. top: 217px;
     
196. width: 103px;
     
197. 
     
198. -moz-animation-name: ckw;
     
199. -moz-animation-duration: 13.5s;
     
200. 
     
201. -webkit-animation-name: ckw;
     
202. -webkit-animation-duration: 13.5s;
     
203. }

复制代码
Step 3. Images

插入图片即可

【CSS3 动画齿轮】相关文章

1. CSS3 动画齿轮

2. CSS3动画效果-animate.css

3. CSS动画集合 可直接生成动画代码 – AniCollection

4. Effeckt.css项目：CSS交互动画应用集锦

5. cssSandpaper-兼容IE的CSS3 JavaScript库

6. jQuery/CSS3实现超酷的动画Tab菜单

7. 超实用！可视化CSS3动画生成神器Stylie

8. 利用CSS3制作动画效果

9. CSS3动画效果入门

10. CSS3 transition实现超酷图片墙动画效果

本文来源：https://www.51html5.com/a876.html