• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

基于HTML5的齿轮动画特效

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

HTML代码

XML/HTML Code复制内容到剪贴板
  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代码

CSS Code复制内容到剪贴板
  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;   

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
HTML5中meta属性的使用方法发布时间：2022-06-21
下一篇：
解析HTML5中的新功能本地存储localStorage发布时间：2022-06-21
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap