基于HTML5的齿轮动画特效_html5教程技巧

这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现的。

HTML代码

XML/HTML Code复制内容到剪贴板

1. div id="级别" >  
2.  div id="内容" >  
3.   div id=“齿轮” >  
4.    div id=“齿轮-静态">div>  
5.    div id="齿轮- system-1">  
6.     div class="影子"  id="shadow15">div>  
7.     div id=“齿轮15” >div>  
8.     div class="影子"  id="shadow14">div>  
9.     div id="gear14" >div>  
10.     div class="影子"  id="shadow13">div>  
11.     div id="gear13" >div>  
12.    div>  
13.    div id="齿轮- system-2">  
14.     div class="影子"  id="shadow10">div>  
15.     div id=“齿轮10” >div>  
16.     div class="影子"  id="shadow3">div>  
17.     div id=“齿轮3” >div>  
18.    div>  
19.    div id="齿轮- system-3">  
20.     div class="影子"  id="shadow9">div>  
21.     div id="gear9" >div>  
22.     div class="影子"  id="shadow7">div>  
23.     div id="gear7" >div>  
24.    div>  
25.    div id="齿轮- system-4">  
26.     div class="影子"  id="shadow6">div>  
27.     div id=“齿轮6” >div>  
28.     div id=“齿轮4” >div>  
29.    div>  
30.    div id="齿轮- system-5">  
31.     div class="影子"  id="shadow12">div>  
32.     div id=“齿轮12” >div>  
33.     div class="影子"  id="shadow11">div>  
34.     div id="gear11" >div>  
35.     div class="影子"  id="shadow8">div>  
36.     div id="gear8" >div>  
37.    div>  
38.    div class="影子"  id="shadow1">div>  
39.    div id=“齿轮1” >div>  
40.    div id="齿轮- system-6">  
41.     div class="影子"  id="shadow5">div>  
42.     div id=“齿轮5” >div>  
43.     div id=“齿轮2” >div>  
44.    div>  
45.    div class="影子"  id="shadowweight">div>  
46.    div id="链-圆圈">div>  
47.    div id="链" >div>  
48.    div id="体重" >div>  
49.   div>  
50.  div>  
51. div>  

CSS代码

CSS Code复制内容到剪贴板

1. #level{   
2.  宽度：100%；   
3.  高度:1px;   
4.  位置：绝对；   
5.  顶部：50%；   
6. }   
7. #content{   
8.  文本对齐:居中;   
9.  页边距:-327px;   
10. }   
11. #gears{   
12.  宽度:478px;   
13.  高度:655px;   
14.  职位：亲戚；   
15.  显示:内联-块;   
16.  垂直对齐:中间;   
17. }   
18. #gears-静态{   
19.  背景:url(FgFnjks.png) 无重复  -363px -903px；   
20.  宽度:329px;   
21.  高度:602px;   
22.  位置：绝对；   
23.  底部底部:5px;   
24.  右右:0px;   
25.  不透明度：0.4；   
26. }   
27. #title{   
28.  垂直对齐:中间;   
29.  颜色:#9EB7B5;   
30.  宽度：43%；   
31.  显示:内联-块;   
32. }  
33. #title h1{   
34.  字体系列: 'PTSansNarrowBold', sans-serif ；   
35.  字体大小：3.6em；   
36.  文本阴影:rgba(0, 0, 0, 0.36) 7px 7 像素 10 像素;   
37. }   
38. #title p{   
39.  字体系列：无衬线；   
40.  字体大小：1.2em；   
41.  行高：148%；   
42.  文本阴影:rgba(0, 0, 0, 0.36) 1px 1 像素 0 像素;   
43. }   
44.   
45. .shadow{   
46.  -webkit-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);   
47.  -moz-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);   
48.  方框阴影： 4px 7px 25px 10px rgba(43, 36, 0, 0.36);   
49. }   
50.   
51. /*齿轮系统-1*/  
52. #gear15{   
53.  背景: url(FgFnjks.png) 无重复  0 -993px；   
54.  宽度: 321px;   
55.  高度: 321px;   
56.  位置：绝对；   
57.  左:45px;   
58.  顶部:179px;   
59.   
60. -webkit-animation：向后旋转 24000ms 线性无限；   
61. -moz-animation：向后旋转 24000ms 线性无限；   
62. -ms-animation：向后旋转 24000ms 线性无限；   
63.  动画：向后旋转 24000 毫秒线性无限；   
64. }  
65. #shadow15{   
66.  宽度:306px;   
67.  高度:306px;   
68.  -webkit-边框-半径：153px；   
69.  -moz-边框-半径：153px；   
70.  边框-半径：153px；   
71.  位置：绝对；   
72.  左:52px;   
73.  顶部:186px;   
74. }   
75. #gear14{   
76.  背景: url(FgFnjks.png) 无重复  0 -856px;   
77.  宽度: 87px;   
78.  高度: 87px;   
79.  位置：绝对；   
80.  左:162px;   
81.  顶部:296px;   
82. }   
83. #shadow14{   
84.  宽度:70px;   
85.  高度:70px;   
86.  -webkit-边框-半径：35px；   
87.  -moz-边框-半径：35px；   
88.  边框-半径：35px；   
89.  位置：绝对；   
90.  左:171px;   
91.  顶部:304px;   
92. }  
93. #gear13{   
94.  背景: url(FgFnjks.png) 无重复  0 -744px；   
95.  宽度: 62px;   
96.  高度: 62px;   
97.  位置：绝对；   
98.  左:174px;   
99.  顶部:309px;   
100.   
101. -webkit-animation：旋转 8000ms 线性无限；   
102. -moz-animation：旋转 8000ms 线性无限；   
103. -ms-animation：旋转 8000ms 线性无限；   
104.  动画：旋转8000ms线性无限；   
105. }   
106. #shadow13{   
107.  宽度:36px;   
108.  高度:36px;   
109.  -webkit-边框-半径：18px；   
110.  -moz-边框-半径：18px；   
111.  边框-半径：18px；   
112.  位置：绝对；   
113.  左:187px;   
114.  顶部:322px;   
115. }   
116.   
117. /*齿轮系统-2*/  
118. #gear10{   
119.  背景: url(FgFnjks.png) 无重复  0 -184px；   
120.  宽度: 122px;   
121.  高度: 122px;   
122.  位置：绝对；   
123.  左:175px;   
124.  顶部:0;   
125.   
126. -webkit-animation：向后旋转 8000 毫秒线性无限；   
127. -moz-animation：向后旋转 8000ms 线性无限；   
128. -ms-animation：向后旋转 8000ms 线性无限；   
129.  动画：向后旋转 8000 毫秒线性无限；   
130. }  
131. #shadow10{   
132.  宽度:86px;   
133.  高度:86px;   
134.  -webkit-边框-半径：43px；   
135.  -moz-边框-半径：43px；   
136.  边框-半径：43px；   
137.  位置：绝对；   
138.  左:193px;   
139.  顶部:18px;   
140. }   
141. #gear3{   
142.  背景: url(FgFnjks.png) 无重复  0 -1493px;   
143.  宽度：85px；   
144.  高度: 84px;   
145.  位置：绝对；   
146.  左:194px;   
147.  顶部:19px;   
148.   
149. -webkit-animation：旋转 10000ms 线性无限；   
150. -moz-animation：旋转 10000ms 线性无限；   
151.  -ms-animation：旋转 10000ms 线性无限；   
152. 动画：旋转10000ms线性无限；   
153. }   
154. #shadow3{   
155.  宽度:60px;   
156.  高度:60px;   
157.  -webkit-边框-半径：30px；   
158.  -moz-边框-半径：30px；   
159.  边框-半径：30px；   
160.  位置：绝对；   
161.  左:206px;   
162.  顶部:31px;   
163. }  
164.   
165. /*齿轮系统-3*/  
166. #gear9{   
167.  背景: url(FgFnjks.png) 无重复  -371 像素 -280 像素；   
168.  宽度: 234px;   
169.  高度：234px；   
170.  位置：绝对；   
171.  左:197px;   
172.  顶部:96px;   
173.   
174. -webkit-animation：旋转 12000ms 线性无限；   
175. -moz-animation：旋转 12000ms 线性无限；   
176.  -ms-animation：旋转 12000ms 线性无限；   
177.  动画：旋转12000ms线性无限；   
178. }   
179. #shadow9{   
180.  宽度:200px;   
181.  高度:200px;   
182.  -webkit-边框-半径：100px；   
183.  -moz-边框-半径：100px；   
184.  边框-半径：100px；   
185.  位置：绝对；   
186.  左:214px;   
187.  顶部:113px;   
188. }   
189. #gear7{   
190.  背景: url(FgFnjks.png) 无重复  -371px 0；   
191.  宽度: 108px;   
192.  高度: 108px;   
193.  位置：绝对；   
194.  左:260px;   
195.  顶部:159px;   
196.   
197. -webkit-animation：向后旋转 10000ms 线性无限；   
198. -moz-animation：向后旋转 10000ms 线性无限；   
199.  -ms-animation：向后旋转 10000ms 线性无限；   
200.  动画：向后旋转 10000ms 线性无限；   
201. }  
202. #shadow7{   
203.  宽度:76px;   
204.  高度:76px;   
205.  -webkit-边框-半径：38px；   
206.  -moz-边框-半径：38px；   
207.  边框-半径：38px；   
208.  位置：绝对；   
209.  左:276px;   
210.  顶部:175px;   
211. }   
212.   
213. /*齿轮系统-4*/  
214. #gear6{   
215.  背景: url(FgFnjks.png) 无重复  0 -1931px；   
216.  宽度: 134px;   
217.  高度: 134px;   
218.  位置：绝对；   
219.  左:305px;   
220.  底部底部:212px;   
221.   
222. -webkit-animation：向后旋转 10000ms 线性无限；   
223. -moz-animation：向后旋转 10000ms 线性无限；   
224.  -ms-animation：向后旋转 10000ms 线性无限；   
225.  动画：向后旋转 10000ms 线性无限；   
226. }   
227. #shadow6{   
228.  宽度:98px;   
229.  高度:98px;   
230.  -webkit-边框-半径：49px；   
231.  -moz-边框-半径：49px；   
232.  边框-半径：49px；   
233.  位置：绝对；   
234.  左:323px;   
235.  底部底部:230px;   
236. }  
237. #gear4{   
238.  背景: url(FgFnjks.png) 无重复  0 -1627px;   
239.  宽度: 69px;   
240.  高度: 69px;   
241.  位置：绝对；   
242.  左:337px;   
243.  底部底部:245px;   
244.   
245. -webkit-animation：向后旋转 10000ms 线性无限；   
246. -moz-animation：向后旋转 10000ms 线性无限；   
247.  -ms-animation：向后旋转 10000ms 线性无限；   
248.  动画：向后旋转 10000ms 线性无限；   
249. }   
250.   
251. /*齿轮系统-5*/  
252. #gear12{   
253.  背景: url(FgFnjks.png) 无重复  0 -530px；   
254.  宽度: 164px;   
255.  高度: 164px;   
256.  位置：绝对；   
257.  左:208px;   
258.  底部底部:85px;   
259.   
260. -webkit-animation：旋转 8000ms 线性无限；   
261. -moz-animation：旋转 8000ms 线性无限；   
262. -ms-animation：旋转 8000ms 线性无限；   
263.  动画：旋转8000ms线性无限；   
264. }  
265. #shadow12{   
266.  宽度:124px;   
267.  高度:124px;   
268.  -webkit-边框-半径：62px；   
269.  -moz-边框-半径：62px；   
270.  边框-半径：62px；   
271.  位置：绝对；   
272.  左:225px;   
273.  底部底部:107px;   
274. }   
275. #gear11{   
276.  背景: url(FgFnjks.png) 无重复  0 -356px；   
277.  宽度: 125px;   
278.  高度: 124px;   
279.  位置：绝对；   
280.  左:228px;   
281.  底部底部:105px;   
282.   
283. -webkit-animation：向后旋转 10000ms 线性无限；   
284. -moz-animation：向后旋转 10000ms 线性无限；   
285.  -ms-animation：向后旋转 10000ms 线性无限；   
286.  动画：向后旋转 10000ms 线性无限；   
287. }   
288. #shadow11{   
289.  宽度:88px;   
290.  高度:88px;   
291.  -webkit-边框-半径：44px；   
292.  -moz-边框-半径：44px；   
293.  边框-半径：44px；   
294.  位置：绝对；   
295.  左:247px;   
296.  底部底部:123px;   
297. }  
298. #gear8{   
299.  背景: url(FgFnjks.png) 无重复  -371 像素 -158 像素；   
300.  宽度: 72px;   
301.  高度: 72px;   
302.  位置：绝对；   
303.  左:254px;   
304.  底部底部:131px;   
305.   
306. -webkit-animation：旋转 6000ms 线性无限；   
307. -moz-animation：旋转 6000ms 线性无限；   
308. -ms-animation：旋转 6000ms 线性无限；   
309.  动画：旋转 6000ms 线性无限；   
310. }   
311. #shadow8{   
312.  宽度:42px;   
313.  高度:42px;   
314.  -webkit-边框-半径：21px；   
315.  -moz-边框-半径：21px；   
316.  边框-半径：21px；   
317.  位置：绝对；   
318.  左:269px;   
319.  底部底部:146px;   
320. }  
321.   
322. /*gear1*/  
323. #gear1{   
324.  latar belakang: url(FgFnjks.png) tidak berulang  0 0;   
325.  lebar: 135px;   
326.  tinggi: 134px;   
327.  kedudukan:mutlak;   
328.  kiri:83px;   
329.  bawahbawah:111px;   
330.   
331.  -webkit-animasi: putar balik 10000ms linear tak terhingga;   
332.  -moz-animasi: putar-belakang 10000ms linear tak terhingga;   
333.  -ms-animasi: putar-belakang 10000ms linear tak terhingga;   
334.  animasi: putar ke belakang 10000ms linear tak terhingga;   
335. }   
336. #bayangan1{   
337.  lebar:96px;   
338.  tinggi:96px;   
339.  -webkit-sempadan-jejari:48px;   
340.  -moz-sempadan-jejari:48px;   
341.  sempadan-jejari:48px;