返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

基于HTML5的齿轮动画特效

2019-01-28 15:21:45于丽

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

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <div id="level">    <div id="content">  
  2.   <div id="gears">      <div id="gears-static"></div>  
  3.    <div id="gear-system-1">       <div class="shadow" id="shadow15"></div>  
  4.     <div id="gear15"></div>       <div class="shadow" id="shadow14"></div>  
  5.     <div id="gear14"></div>       <div class="shadow" id="shadow13"></div>  
  6.     <div id="gear13"></div>      </div>  
  7.    <div id="gear-system-2">       <div class="shadow" id="shadow10"></div>  
  8.     <div id="gear10"></div>       <div class="shadow" id="shadow3"></div>  
  9.     <div id="gear3"></div>      </div>  
  10.    <div id="gear-system-3">       <div class="shadow" id="shadow9"></div>  
  11.     <div id="gear9"></div>       <div class="shadow" id="shadow7"></div>  
  12.     <div id="gear7"></div>      </div>  
  13.    <div id="gear-system-4">       <div class="shadow" id="shadow6"></div>  
  14.     <div id="gear6"></div>       <div id="gear4"></div>  
  15.    </div>      <div id="gear-system-5">  
  16.     <div class="shadow" id="shadow12"></div>       <div id="gear12"></div>  
  17.     <div class="shadow" id="shadow11"></div>       <div id="gear11"></div>  
  18.     <div class="shadow" id="shadow8"></div>       <div id="gear8"></div>  
  19.    </div>      <div class="shadow" id="shadow1"></div>  
  20.    <div id="gear1"></div>      <div id="gear-system-6">  
  21.     <div class="shadow" id="shadow5"></div>       <div id="gear5"></div>  
  22.     <div id="gear2"></div>      </div>  
  23.    <div class="shadow" id="shadowweight"></div>      <div id="chain-circle"></div>  
  24.    <div id="chain"></div>      <div id="weight"></div>  
  25.   </div>    </div>  
  26. </div>  
相关文章 大家在看