基于HTML5的齿轮动画特效_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