這是一個基于HTML5的齒輪動畫特效,我們將齒輪轉(zhuǎn)動的物理學原理,轉(zhuǎn)換為HTML5代碼,在網(wǎng)頁上實現(xiàn)了模擬齒輪轉(zhuǎn)動的動畫效果。該齒輪動畫的最大特點是它由好多個齒輪組成,這對齒輪傳動的算法要求就大大提高了,而且我們并沒有用JavaScript,而是純CSS3實現(xiàn)的。
XML/HTML Code復制內(nèi)容到剪貼板
- <div id="level">
- <div id="content">
- <div id="gears">
- <div id="gears-static"></div>
- <div id="gear-system-1">
- <div class="shadow" id="shadow15"></div>
- <div id="gear15"></div>
- <div class="shadow" id="shadow14"></div>
- <div id="gear14"></div>
- <div class="shadow" id="shadow13"></div>
- <div id="gear13"></div>
- </div>
- <div id="gear-system-2">
- <div class="shadow" id="shadow10"></div>
- <div id="gear10"></div>
- <div class="shadow" id="shadow3"></div>
- <div id="gear3"></div>
- </div>
- <div id="gear-system-3">
- <div class="shadow" id="shadow9"></div>
- <div id="gear9"></div>
- <div class="shadow" id="shadow7"></div>
- <div id="gear7"></div>
- </div>
- <div id="gear-system-4">
- <div class="shadow" id="shadow6"></div>
- <div id="gear6"></div>
- <div id="gear4"></div>
- </div>
- <div id="gear-system-5">
- <div class="shadow" id="shadow12"></div>
- <div id="gear12"></div>
- <div class="shadow" id="shadow11"></div>
- <div id="gear11"></div>
- <div class="shadow" id="shadow8"></div>
- <div id="gear8"></div>
- </div>
- <div class="shadow" id="shadow1"></div>
- <div id="gear1"></div>
- <div id="gear-system-6">
- <div class="shadow" id="shadow5"></div>
- <div id="gear5"></div>
- <div id="gear2"></div>
- </div>
- <div class="shadow" id="shadowweight"></div>
- <div id="chain-circle"></div>
- <div id="chain"></div>
- <div id="weight"></div>
- </div>
- </div>
- </div>