基于HTML5的齿轮动画特效

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

HTML代码

1. <div id="level">  
2.  <div id="content">  
3.   <div id="gears">  
4.    <div id="gears-static"></div>  
5.    <div id="gear-system-1">  
6.     <div class="shadow" id="shadow15"></div>  
7.     <div id="gear15"></div>  
8.     <div class="shadow" id="shadow14"></div>  
9.     <div id="gear14"></div>  
10.     <div class="shadow" id="shadow13"></div>  
11.     <div id="gear13"></div>  
12.    </div>  
13.    <div id="gear-system-2">  
14.     <div class="shadow" id="shadow10"></div>  
15.     <div id="gear10"></div>  
16.     <div class="shadow" id="shadow3"></div>  
17.     <div id="gear3"></div>  
18.    </div>  
19.    <div id="gear-system-3">  
20.     <div class="shadow" id="shadow9"></div>  
21.     <div id="gear9"></div>  
22.     <div class="shadow" id="shadow7"></div>  
23.     <div id="gear7"></div>  
24.    </div>  
25.    <div id="gear-system-4">  
26.     <div class="shadow" id="shadow6"></div>  
27.     <div id="gear6"></div>  
28.     <div id="gear4"></div>  
29.    </div>  
30.    <div id="gear-system-5">  
31.     <div class="shadow" id="shadow12"></div>  
32.     <div id="gear12"></div>  
33.     <div class="shadow" id="shadow11"></div>  
34.     <div id="gear11"></div>  
35.     <div class="shadow" id="shadow8"></div>  
36.     <div id="gear8"></div>  
37.    </div>  
38.    <div class="shadow" id="shadow1"></div>  
39.    <div id="gear1"></div>  
40.    <div id="gear-system-6">  
41.     <div class="shadow" id="shadow5"></div>  
42.     <div id="gear5"></div>  
43.     <div id="gear2"></div>  
44.    </div>  
45.    <div class="shadow" id="shadowweight"></div>  
46.    <div id="chain-circle"></div>  
47.    <div id="chain"></div>  
48.    <div id="weight"></div>  
49.   </div>  
50.  </div>  
51. </div>  

CSS代码

1. #level{   
2.  width:100%;   
3.  height:1px;   
4.  position:absolute;   
5.  top:50%;   
6. }   
7. #content{   
8.  text-align:center;   
9.  margin-top:-327px;   
10. }   
11. #gears{   
12.  width:478px;   
13.  height:655px;   
14.  position:relative;   
15.  display:inline-block;   
16.  vertical-align:middle;   
17. }   
18. #gears-static{   
19.  background:url(FgFnjks.png) no-repeat -363px -903px;   
20.  width:329px;   
21.  height:602px;   
22.  position:absolute;   
23.  bottombottom:5px;   
24.  rightright:0px;   
25.  opacity:0.4;   
26. }   
27. #title{   
28.  vertical-align:middle;   
29.  color:#9EB7B5;   
30.  width:43%;   
31.  display:inline-block;   
32. }   
33. #title h1{   
34.  font-family: 'PTSansNarrowBold', sans-serif;   
35.  font-size:3.6em;   
36.  text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px;   
37. }   
38. #title p{   
39.  font-family: sans-serif;   
40.  font-size:1.2em;   
41.  line-height:148%;   
42.  text-shadow:rgba(0, 0, 0, 0.36) 1px 1px 0px;   
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.  box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);   
49. }   
50.   
51. /*gear-system-1*/  
52. #gear15{   
53.  background: url(FgFnjks.png) no-repeat 0 -993px;   
54.  width: 321px;   
55.  height: 321px;   
56.  position:absolute;   
57.  left:45px;   
58.  top:179px;   
59.   
60.  -webkit-animation: rotate-back 24000ms linear infinite;   
61.  -moz-animation: rotate-back 24000ms linear infinite;   
62.  -ms-animation: rotate-back 24000ms linear infinite;   
63.  animation: rotate-back 24000ms linear infinite;   
64. }   
65. #shadow15{   
66.  width:306px;   
67.  height:306px;   
68.  -webkit-border-radius:153px;   
69.  -moz-border-radius:153px;   
70.  border-radius:153px;   
71.  position:absolute;   
72.  left:52px;   
73.  top:186px;   
74. }   
75. #gear14{   
76.  background: url(FgFnjks.png) no-repeat 0 -856px;   
77.  width: 87px;   
78.  height: 87px;   
79.  position:absolute;   
80.  left:162px;   
81.  top:296px;   
82. }   
83. #shadow14{   
84.  width:70px;   
85.  height:70px;   
86.  -webkit-border-radius:35px;   
87.  -moz-border-radius:35px;   
88.  border-radius:35px;   
89.  position:absolute;   
90.  left:171px;   
91.  top:304px;   
92. }   
93. #gear13{   
94.  background: url(FgFnjks.png) no-repeat 0 -744px;   
95.  width: 62px;   
96.  height: 62px;   
97.  position:absolute;   
98.  left:174px;   
99.  top:309px;   
100.   
101.  -webkit-animation: rotate 8000ms linear infinite;   
102.  -moz-animation: rotate 8000ms linear infinite;   
103.  -ms-animation: rotate 8000ms linear infinite;   
104.  animation: rotate 8000ms linear infinite;   
105. }   
106. #shadow13{   
107.  width:36px;   
108.  height:36px;   
109.  -webkit-border-radius:18px;   
110.  -moz-border-radius:18px;   
111.  border-radius:18px;   
112.  position:absolute;   
113.  left:187px;   
114.  top:322px;   
115. }   
116.   
117. /*gear-system-2*/  
118. #gear10{   
119.  background: url(FgFnjks.png) no-repeat 0 -184px;   
120.  width: 122px;   
121.  height: 122px;   
122.  position:absolute;   
123.  left:175px;   
124.  top:0;   
125.   
126.  -webkit-animation: rotate-back 8000ms linear infinite;   
127.  -moz-animation: rotate-back 8000ms linear infinite;   
128.  -ms-animation: rotate-back 8000ms linear infinite;   
129.  animation: rotate-back 8000ms linear infinite;   
130. }   
131. #shadow10{   
132.  width:86px;   
133.  height:86px;   
134.  -webkit-border-radius:43px;   
135.  -moz-border-radius:43px;   
136.  border-radius:43px;   
137.  position:absolute;   
138.  left:193px;   
139.  top:18px;   
140. }   
141. #gear3{   
142.  background: url(FgFnjks.png) no-repeat 0 -1493px;   
143.  width: 85px;   
144.  height: 84px;   
145.  position:absolute;   
146.  left:194px;   
147.  top:19px;   
148.   
149.  -webkit-animation: rotate 10000ms linear infinite;   
150.  -moz-animation: rotate 10000ms linear infinite;   
151.  -ms-animation: rotate 10000ms linear infinite;   
152.  animation: rotate 10000ms linear infinite;   
153. }   
154. #shadow3{   
155.  width:60px;   
156.  height:60px;   
157.  -webkit-border-radius:30px;   
158.  -moz-border-radius:30px;   
159.  border-radius:30px;   
160.  position:absolute;   
161.  left:206px;   
162.  top:31px;   
163. }   
164.   
165. /*gear-system-3*/  
166. #gear9{   
167.  background: url(FgFnjks.png) no-repeat -371px -280px;   
168.  width: 234px;   
169.  height: 234px;   
170.  position:absolute;   
171.  left:197px;   
172.  top:96px;   
173.   
174.  -webkit-animation: rotate 12000ms linear infinite;   
175.  -moz-animation: rotate 12000ms linear infinite;   
176.  -ms-animation: rotate 12000ms linear infinite;   
177.  animation: rotate 12000ms linear infinite;   
178. }   
179. #shadow9{   
180.  width:200px;   
181.  height:200px;   
182.  -webkit-border-radius:100px;   
183.  -moz-border-radius:100px;   
184.  border-radius:100px;   
185.  position:absolute;   
186.  left:214px;   
187.  top:113px;   
188. }   
189. #gear7{   
190.  background: url(FgFnjks.png) no-repeat -371px 0;   
191.  width: 108px;   
192.  height: 108px;   
193.  position:absolute;   
194.  left:260px;   
195.  top:159px;   
196.   
197.  -webkit-animation: rotate-back 10000ms linear infinite;   
198.  -moz-animation: rotate-back 10000ms linear infinite;   
199.  -ms-animation: rotate-back 10000ms linear infinite;   
200.  animation: rotate-back 10000ms linear infinite;   
201. }   
202. #shadow7{   
203.  width:76px;   
204.  height:76px;   
205.  -webkit-border-radius:38px;   
206.  -moz-border-radius: 38px;   
207.  border-radius: 38px;   
208.  position:absolute;   
209.  left:276px;   
210.  top:175px;   
211. }   
212.   
213. /*gear-system-4*/  
214. #gear6{   
215.  background: url(FgFnjks.png) no-repeat 0 -1931px;   
216.  width: 134px;   
217.  height: 134px;   
218.  position:absolute;   
219.  left:305px;   
220.  bottombottom:212px;   
221.   
222.  -webkit-animation: rotate-back 10000ms linear infinite;   
223.  -moz-animation: rotate-back 10000ms linear infinite;   
224.  -ms-animation: rotate-back 10000ms linear infinite;   
225.  animation: rotate-back 10000ms linear infinite;   
226. }   
227. #shadow6{   
228.  width:98px;   
229.  height:98px;   
230.  -webkit-border-radius:49px;   
231.  -moz-border-radius: 49px;   
232.  border-radius: 49px;   
233.  position:absolute;   
234.  left:323px;   
235.  bottombottom:230px;   
236. }   
237. #gear4{   
238.  background: url(FgFnjks.png) no-repeat 0 -1627px;   
239.  width: 69px;   
240.  height: 69px;   
241.  position:absolute;   
242.  left:337px;   
243.  bottombottom:245px;   
244.   
245.  -webkit-animation: rotate-back 10000ms linear infinite;   
246.  -moz-animation: rotate-back 10000ms linear infinite;   
247.  -ms-animation: rotate-back 10000ms linear infinite;   
248.  animation: rotate-back 10000ms linear infinite;   
249. }   
250.   
251. /*gear-system-5*/  
252. #gear12{   
253.  background: url(FgFnjks.png) no-repeat 0 -530px;   
254.  width: 164px;   
255.  height: 164px;   
256.  position:absolute;   
257.  left:208px;   
258.  bottombottom:85px;   
259.   
260.  -webkit-animation: rotate 8000ms linear infinite;   
261.  -moz-animation: rotate 8000ms linear infinite;   
262.  -ms-animation: rotate 8000ms linear infinite;   
263.  animation: rotate 8000ms linear infinite;   
264. }   
265. #shadow12{   
266.  width:124px;   
267.  height:124px;   
268.  -webkit-border-radius:62px;   
269.  -moz-border-radius:62px;   
270.  border-radius:62px;   
271.  position:absolute;   
272.  left:225px;   
273.  bottombottom:107px;   
274. }   
275. #gear11{   
276.  background: url(FgFnjks.png) no-repeat 0 -356px;   
277.  width: 125px;   
278.  height: 124px;   
279.  position:absolute;   
280.  left:228px;   
281.  bottombottom:105px;   
282.   
283.  -webkit-animation: rotate-back 10000ms linear infinite;   
284.  -moz-animation: rotate-back 10000ms linear infinite;   
285.  -ms-animation: rotate-back 10000ms linear infinite;   
286.  animation: rotate-back 10000ms linear infinite;   
287. }   
288. #shadow11{   
289.  width:88px;   
290.  height:88px;   
291.  -webkit-border-radius:44px;   
292.  -moz-border-radius:44px;   
293.  border-radius:44px;   
294.  position:absolute;   
295.  left:247px;   
296.  bottombottom:123px;   
297. }   
298. #gear8{   
299.  background: url(FgFnjks.png) no-repeat -371px -158px;   
300.  width: 72px;   
301.  height: 72px;   
302.  position:absolute;   
303.  left:254px;   
304.  bottombottom:131px;   
305.   
306.  -webkit-animation: rotate 6000ms linear infinite;   
307.  -moz-animation: rotate 6000ms linear infinite;   
308.  -ms-animation: rotate 6000ms linear infinite;   
309.  animation: rotate 6000ms linear infinite;   
310. }   
311. #shadow8{   
312.  width:42px;   
313.  height:42px;   
314.  -webkit-border-radius:21px;   
315.  -moz-border-radius: 21px;   
316.  border-radius: 21px;   
317.  position:absolute;   
318.  left:269px;   
319.  bottombottom:146px;   
320. }   
321.   
322. /*gear1*/  
323. #gear1{   
324.  background: url(FgFnjks.png) no-repeat 0 0;   
325.  width: 135px;   
326.  height: 134px;   
327.  position:absolute;   
328.  left:83px;   
329.  bottombottom:111px;   
330.   
331.  -webkit-animation: rotate-back 10000ms linear infinite;   
332.  -moz-animation: rotate-back 10000ms linear infinite;   
333.  -ms-animation: rotate-back 10000ms linear infinite;   
334.  animation: rotate-back 10000ms linear infinite;   
335. }   
336. #shadow1{   
337.  width:96px;   
338.  height:96px;   
339.  -webkit-border-radius:48px;   
340.  -moz-border-radius:48px;   
341.  border-radius:48px;   
342.  position:absolute;   
343.  left:103px;   
344.  bottombottom:130px;   
345. }   
346.   
347. /*gear-system-6*/  
348. #gear5{   
349.  background: url(FgFnjks.png) no-repeat 0 -1746px;   
350.  width: 134px;   
351.  height: 135px;   
352.  position:absolute;   
353.  left:22px;   
354.  top:108px;   
355.   
356.  -webkit-animation: rotate 10000ms linear infinite alternate;   
357.  -moz-animation: rotate 10000ms linear infinite alternate;   
358.  -ms-animation: rotate 10000ms linear infinite alternate;   
359.  animation: rotate 10000ms linear infinite alternate;   
360. }   
361. #shadow5{   
362.  width:96px;   
363.  height:96px;   
364.  -webkit-border-radius:48px;   
365.  -moz-border-radius:48px;   
366.  border-radius:48px;   
367.  position:absolute;   
368.  left:41px;   
369.  top:127px;   
370. }   
371. #gear2{   
372.  background: url(FgFnjks.png) no-repeat 0 -1364px;   
373.  width: 80px;   
374.  height: 79px;   
375.  position:absolute;   
376.  left:49px;   
377.  top:136px;   
378.   
379.  -webkit-animation: rotate-back 10000ms linear infinite alternate;   
380.  -moz-animation: rotate-back 10000ms linear infinite alternate;   
381.  -ms-animation: rotate-back 10000ms linear infinite alternate;   
382.  animation: rotate-back 10000ms linear infinite alternate;   
383. }   
384.   
385. /*weight*/  
386. #weight{   
387.  background: url(FgFnjks.png) no-repeat -371px -564px;   
388.  width: 34px;   
389.  height: 92px;   
390.  position:absolute;   
391.  left:1px;   
392.  bottombottom:0;   
393.   
394.  -webkit-animation: up 10000ms linear infinite alternate;   
395.  -moz-animation: up 10000ms linear infinite alternate;   
396.  -ms-animation: up 10000ms linear infinite alternate;   
397.  animation: up 10000ms linear infinite alternate;   
398. }   
399. #shadowweight{   
400.  width:10px;   
401.  height:80px;   
402.  position:absolute;   
403.  left:12px;   
404.  bottombottom:0px;   
405.   
406.  -webkit-animation: up 10000ms linear infinite alternate;   
407.  -moz-animation: up 10000ms linear infinite alternate;   
408.  -ms-animation: up 10000ms linear infinite alternate;   
409.  animation: up 10000ms linear infinite alternate;   
410. }   
411.   
412. /*chain*/  
413. #chain-circle{   
414.  background: url(FgFnjks.png) no-repeat -371px -706px;   
415.  width:146px;   
416.  height:147px;   
417.  position:absolute;   
418.  left:17px;   
419.  top:102px;   
420.   
421.  -webkit-animation: rotate 10000ms linear infinite alternate;   
422.  -moz-animation: rotate 10000ms linear infinite alternate;   
423.  -ms-animation: rotate 10000ms linear infinite alternate;   
424.  animation: rotate 10000ms linear infinite alternate;   
425. }   
426. #chain{   
427.  width:1px;   
428.  height:380px;   
429.  border-left:2px dotted #C8D94A;   
430.  position:absolute;   
431.  left:17px;   
432.  top:175px;   
433.  opacity:0.7;   
434.   
435.  -webkit-animation: collapse 10000ms linear infinite alternate;   
436.  -moz-animation: collapse 10000ms linear infinite alternate;   
437.  -ms-animation: collapse 10000ms linear infinite alternate;   
438.  animation: collapse 10000ms linear infinite alternate;   
439. }   
440.   
441. /*ANIMATIONS*/  
442. /*rotate*/  
443. @keyframes "rotate" {   
444.  from {   
445.     -webkit-transform: rotate(0deg);   
446.     -moz-transform: rotate(0deg);   
447.     -o-transform: rotate(0deg);   
448.     -ms-transform: rotate(0deg);   
449.     transform: rotate(0deg);   
450.  }   
451.  to {   
452.     -webkit-transform: rotate(360deg);   
453.     -moz-transform: rotate(360deg);   
454.     -o-transform: rotate(360deg);   
455.     -ms-transform: rotate(360deg);   
456.     transform: rotate(360deg);   
457.  }   
458. }   
459.   
460. @-moz-keyframes rotate {   
461.  from {   
462.    -moz-transform: rotate(0deg);   
463.    transform: rotate(0deg);   
464.  }   
465.  to {   
466.    -moz-transform: rotate(360deg);   
467.    transform: rotate(360deg);   
468.  }   
469. }   
470.   
471. @-webkit-keyframes "rotate" {   
472.  from {   
473.    -webkit-transform: rotate(0deg);   
474.    transform: rotate(0deg);   
475.  }   
476.  to {   
477.    -webkit-transform: rotate(360deg);   
478.    transform: rotate(360deg);   
479.  }   
480. }   
481.   
482. @-ms-keyframes "rotate" {   
483.  from {   
484.    -ms-transform: rotate(0deg);   
485.    transform: rotate(0deg);   
486.  }   
487.  to {   
488.    -ms-transform: rotate(360deg);   
489.    transform: rotate(360deg);   
490.  }   
491. }   
492.   
493. @-o-keyframes "rotate" {   
494.  from {   
495.    -o-transform: rotate(0deg);   
496.    transform: rotate(0deg);   
497.  }   
498.  to {   
499.    -o-transform: rotate(360deg);   
500.    transform: rotate(360deg);   
501.  }   
502. }   
503. /*rotate-back*/  
504. @keyframes "rotate-back" {   
505.  from {   
506.     -webkit-transform: rotate(0deg);   
507.     -moz-transform: rotate(0deg);   
508.     -o-transform: rotate(0deg);   
509.     -ms-transform: rotate(0deg);   
510.     transform: rotate(0deg);   
511.  }   
512.  to {   
513.     -webkit-transform: rotate(-360deg);   
514.     -moz-transform: rotate(-360deg);   
515.     -o-transform: rotate(-360deg);   
516.     -ms-transform: rotate(-360deg);   
517.     transform: rotate(-360deg);   
518.  }   
519. }   
520.   
521. @-moz-keyframes rotate-back {   
522.  from {   
523.    -moz-transform: rotate(0deg);   
524.    transform: rotate(0deg);   
525.  }   
526.  to {   
527.    -moz-transform: rotate(-360deg);   
528.    transform: rotate(-360deg);   
529.  }   
530. }   
531.   
532. @-webkit-keyframes "rotate-back" {   
533.  from {   
534.    -webkit-transform: rotate(0deg);   
535.    transform: rotate(0deg);   
536.  }   
537.  to {   
538.    -webkit-transform: rotate(-360deg);   
539.    transform: rotate(-360deg);   
540.  }   
541. }   
542.   
543. @-ms-keyframes "rotate-back" {   
544.  from {   
545.    -ms-transform: rotate(0deg);   
546.    transform: rotate(0deg);   
547.  }   
548.  to {   
549.    -ms-transform: rotate(-360deg);   
550.    transform: rotate(-360deg);   
551.  }   
552. }   
553.   
554. @-o-keyframes "rotate-back" {   
555.  from {   
556.    -o-transform: rotate(0deg);   
557.    transform: rotate(0deg);   
558.  }   
559.  to {   
560.    -o-transform: rotate(-360deg);   
561.    transform: rotate(-360deg);   
562.  }   
563. }   
564. /*weight up*/  
565. @keyframes "up" {   
566.  from {   
567.     bottombottom: 0px;   
568.  }   
569.  to {   
570.     bottombottom: 340px;   
571.  }   
572. }   
573.   
574. @-moz-keyframes up {   
575.  from {   
576.    bottombottom: 0px;   
577.  }   
578.  to {   
579.    bottombottom: 340px;   
580.  }   
581. }   
582.   
583. @-webkit-keyframes "up" {   
584.  from {   
585.    bottombottom: 0px;   
586.  }   
587.  to {   
588.    bottombottom: 340px;   
589.  }   
590. }   
591.   
592. @-ms-keyframes "up" {   
593.  from {   
594.    bottombottom: 0px;   
595.  }   
596.  to {   
597.    bottombottom: 340px;   
598.  }   
599. }   
600.   
601. @-o-keyframes "up" {   
602.  from {   
603.    bottombottom: 0px;   
604.  }   
605.  to {   
606.    bottombottom: 340px;   
607.  }   
608. }   
609. /*chain up and down*/  
610. @keyframes "collapse" {   
611.  from {   
612.     height: 387px;   
613.  }   
614.  to {   
615.     height: 48px;   
616.  }   
617. }   
618.   
619. @-moz-keyframes collapse {   
620.  from {   
621.    height: 387px;   
622.  }   
623.  to {   
624.    height: 48px;   
625.  }   
626. }   
627.   
628. @-webkit-keyframes "collapse" {   
629.  from {   
630.    height: 387px;   
631.  }   
632.  to {   
633.    height: 48px;   
634.  }   
635. }   
636.   
637. @-ms-keyframes "collapse" {   
638.  from {   
639.    height: 387px;   
640.  }   
641.  to {   
642.    height: 48px;   
643.  }   
644. }   
645.   
646. @-o-keyframes "collapse" {   
647.  from {   
648.    height: 387px;   
649.  }   
650.  to {   
651.    height: 48px;   
652.  }   
653. }   

纯CSS3实现的齿轮动画特效，希望大家喜欢。