首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

基于HTML5的齿轮动画特效

所属分类： 网页制作 / html5 阅读数： 1939
收藏 0 赞 0 分享

这是一个基于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
更多精彩内容其他人还在看

突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)

前面已经总结了主要的API扩展(应用缓存/服务端消息/桌面通知),下面的几个只有在特定的场合才能发挥它的潜质，无一例外，IE均不支持,桌面通知目前只有Chrome支持,感兴趣的朋友可以了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5之HTML元素扩展(上)—新增加的元素及使用概述

HTML5中加入了全新的结构型元素，例如页眉header，页脚footer，导航nav，内容article，章节section等除了这种整个页面的结构型元素，html5也加入了块级别的语义元素,感兴趣的朋友可以了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注

在HTML5增强的元素中，最值得关注的就是表单元素;在HTML5中，表单已经做了重大的修整，一些以前需要通过JavaScript编码实现的功能现在无需编码就可轻松实现,感兴趣的朋友可以详细了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代

WebGL开启了网页3D渲染的新时代，它允许在canvas中直接渲染3D的内容，而不借助任何插件,看到此处是不是感觉特别惊讶啊，WebGL有一个很好的中文教程，就是下面使用参考中的第一个链接，所以这里不再班门弄斧，后面的内容只是简单的总结一下学习的内容,感兴趣的朋友可以了
收藏 0 赞 0 分享

HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍

前面我们看到了使用原生的WebGL API开发是多么的累,只因如此大量的WebGL框架被开发出来，这些框架不同程度的封装了创建3D场景的各种要素你可以快速创建需要的3D场景，感兴趣的朋友可以了解下，或许本文对你有所帮助
收藏 0 赞 0 分享

HTML中fieldset标签概述及使用方法

之前HTML没有好好学，导致以前看到控件组样式感觉很新奇,fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段,接下来对HTML中fieldset标签的使用进行详细解读，感兴趣的朋友可以了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5中微数据概述及在搜索引擎中的使用举例

HTML5微数据规范是标记内容的一种方式，用于描述特定的信息类型，例如评论、人物信息或活动。微数据使用 HTML 标记(常为 span>或 div)中的简单属性为项和属性指定简要的描述性名称
收藏 0 赞 0 分享

html5新增的属性和废除的属性简要概述

HTML5中，在新增加和废除很多元素的同时，也增加和废除了很多属性比如表单相关的属性/链接相关属性是新增的而HTML4中一些属性就被废除掉了，感兴趣的你可以了解下，或许对你学习html5有所帮助
收藏 0 赞 0 分享

html5的新增的标签和废除的标签简要概述

HTML5中在新增加和废除很多标签的同时，也增加和废除了很多标签比如新增的结构标签:section元素/video元素等等，感兴趣的朋友可以了解下，希望本文的知识点对你有所帮助
收藏 0 赞 0 分享

html5配合css3实现带提示文字的输入框(摆脱js)

webkit特有的一个css，可以控制里面的文字样式，配合css3的动画效果和伪类，我们就可以很容易做出一个带动画的输入框，在系统登录、搜索等位置很适合，感兴趣的你可以参考下本文或许可以帮助到你
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22