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

HTML

<html><head><meta charset="gb2312"><link href="css/zzsc.css" rel="stylesheet"><title>CSS3实现齿轮转动动画特效</title>
</head><body><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>
</body></html>

Css

body {margin:0px;padding:0px;overflow:hidden;background:#196a73;/* Old browsers */background-image:url('http://www.xyhtml5.com/examples/3164/css/bg.gif');height:100%;
}#level {width:100%;height:1px;position:absolute;top:50%;
}#content {text-align:center;margin-top:-327px;
}#gears {width:478px;height:655px;position:relative;display:inline-block;vertical-align:middle;
}#gears-static {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat -363px -903px;width:329px;height:602px;position:absolute;bottom:5px;right:0px;opacity:0.4;
}#title {vertical-align:middle;color:#9EB7B5;width:43%;display:inline-block;
}#title h1 {font-family:'PTSansNarrowBold', sans-serif;font-size:3.6em;text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px;
}#title p {font-family:sans-serif;font-size:1.2em;line-height:148%;text-shadow:rgba(0, 0, 0, 0.36) 1px 1px 0px;
}.shadow {-webkit-box-shadow:4px 7px 25px 10px rgba(43, 36, 0, 0.36);-moz-box-shadow:4px 7px 25px 10px rgba(43, 36, 0, 0.36);box-shadow:4px 7px 25px 10px rgba(43, 36, 0, 0.36);
}/*gear-system-1*/#gear15 {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat 0 -993px;width:321px;height:321px;position:absolute;left:45px;top:179px;-webkit-animation:rotate-back 24000ms linear infinite;-moz-animation:rotate-back 24000ms linear infinite;-ms-animation:rotate-back 24000ms linear infinite;animation:rotate-back 24000ms linear infinite;
}#shadow15 {width:306px;height:306px;-webkit-border-radius:153px;-moz-border-radius:153px;border-radius:153px;position:absolute;left:52px;top:186px;
}#gear14 {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat 0 -856px;width:87px;height:87px;position:absolute;left:162px;top:296px;
}#shadow14 {width:70px;height:70px;-webkit-border-radius:35px;-moz-border-radius:35px;border-radius:35px;position:absolute;left:171px;top:304px;
}#gear13 {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat 0 -744px;width:62px;height:62px;position:absolute;left:174px;top:309px;-webkit-animation:rotate 8000ms linear infinite;-moz-animation:rotate 8000ms linear infinite;-ms-animation:rotate 8000ms linear infinite;animation:rotate 8000ms linear infinite;
}#shadow13 {width:36px;height:36px;-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px;position:absolute;left:187px;top:322px;
}/*gear-system-2*/#gear10 {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat 0 -184px;width:122px;height:122px;position:absolute;left:175px;top:0;-webkit-animation:rotate-back 8000ms linear infinite;-moz-animation:rotate-back 8000ms linear infinite;-ms-animation:rotate-back 8000ms linear infinite;animation:rotate-back 8000ms linear infinite;
}#shadow10 {width:86px;height:86px;-webkit-border-radius:43px;-moz-border-radius:43px;border-radius:43px;position:absolute;left:193px;top:18px;
}#gear3 {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat 0 -1493px;width:85px;height:84px;position:absolute;left:194px;top:19px;-webkit-animation:rotate 10000ms linear infinite;-moz-animation:rotate 10000ms linear infinite;-ms-animation:rotate 10000ms linear infinite;animation:rotate 10000ms linear infinite;
}#shadow3 {width:60px;height:60px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;position:absolute;left:206px;top:31px;
}/*gear-system-3*/#gear9 {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat -371px -280px;width:234px;height:234px;position:absolute;left:197px;top:96px;-webkit-animation:rotate 12000ms linear infinite;-moz-animation:rotate 12000ms linear infinite;-ms-animation:rotate 12000ms linear infinite;animation:rotate 12000ms linear infinite;
}#shadow9 {width:200px;height:200px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;position:absolute;left:214px;top:113px;
}#gear7 {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat -371px 0;width:108px;height:108px;position:absolute;left:260px;top:159px;-webkit-animation:rotate-back 10000ms linear infinite;-moz-animation:rotate-back 10000ms linear infinite;-ms-animation:rotate-back 10000ms linear infinite;animation:rotate-back 10000ms linear infinite;
}#shadow7 {width:76px;height:76px;-webkit-border-radius:38px;-moz-border-radius:38px;border-radius:38px;position:absolute;left:276px;top:175px;
}/*gear-system-4*/#gear6 {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat 0 -1931px;width:134px;height:134px;position:absolute;left:305px;bottom:212px;-webkit-animation:rotate-back 10000ms linear infinite;-moz-animation:rotate-back 10000ms linear infinite;-ms-animation:rotate-back 10000ms linear infinite;animation:rotate-back 10000ms linear infinite;
}#shadow6 {width:98px;height:98px;-webkit-border-radius:49px;-moz-border-radius:49px;border-radius:49px;position:absolute;left:323px;bottom:230px;
}#gear4 {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat 0 -1627px;width:69px;height:69px;position:absolute;left:337px;bottom:245px;-webkit-animation:rotate-back 10000ms linear infinite;-moz-animation:rotate-back 10000ms linear infinite;-ms-animation:rotate-back 10000ms linear infinite;animation:rotate-back 10000ms linear infinite;
}/*gear-system-5*/#gear12 {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat 0 -530px;width:164px;height:164px;position:absolute;left:208px;bottom:85px;-webkit-animation:rotate 8000ms linear infinite;-moz-animation:rotate 8000ms linear infinite;-ms-animation:rotate 8000ms linear infinite;animation:rotate 8000ms linear infinite;
}#shadow12 {width:124px;height:124px;-webkit-border-radius:62px;-moz-border-radius:62px;border-radius:62px;position:absolute;left:225px;bottom:107px;
}#gear11 {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat 0 -356px;width:125px;height:124px;position:absolute;left:228px;bottom:105px;-webkit-animation:rotate-back 10000ms linear infinite;-moz-animation:rotate-back 10000ms linear infinite;-ms-animation:rotate-back 10000ms linear infinite;animation:rotate-back 10000ms linear infinite;
}#shadow11 {width:88px;height:88px;-webkit-border-radius:44px;-moz-border-radius:44px;border-radius:44px;position:absolute;left:247px;bottom:123px;
}#gear8 {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat -371px -158px;width:72px;height:72px;position:absolute;left:254px;bottom:131px;-webkit-animation:rotate 6000ms linear infinite;-moz-animation:rotate 6000ms linear infinite;-ms-animation:rotate 6000ms linear infinite;animation:rotate 6000ms linear infinite;
}#shadow8 {width:42px;height:42px;-webkit-border-radius:21px;-moz-border-radius:21px;border-radius:21px;position:absolute;left:269px;bottom:146px;
}/*gear1*/#gear1 {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat 0 0;width:135px;height:134px;position:absolute;left:83px;bottom:111px;-webkit-animation:rotate-back 10000ms linear infinite;-moz-animation:rotate-back 10000ms linear infinite;-ms-animation:rotate-back 10000ms linear infinite;animation:rotate-back 10000ms linear infinite;
}#shadow1 {width:96px;height:96px;-webkit-border-radius:48px;-moz-border-radius:48px;border-radius:48px;position:absolute;left:103px;bottom:130px;
}/*gear-system-6*/#gear5 {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat 0 -1746px;width:134px;height:135px;position:absolute;left:22px;top:108px;-webkit-animation:rotate 10000ms linear infinite alternate;-moz-animation:rotate 10000ms linear infinite alternate;-ms-animation:rotate 10000ms linear infinite alternate;animation:rotate 10000ms linear infinite alternate;
}#shadow5 {width:96px;height:96px;-webkit-border-radius:48px;-moz-border-radius:48px;border-radius:48px;position:absolute;left:41px;top:127px;
}#gear2 {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat 0 -1364px;width:80px;height:79px;position:absolute;left:49px;top:136px;-webkit-animation:rotate-back 10000ms linear infinite alternate;-moz-animation:rotate-back 10000ms linear infinite alternate;-ms-animation:rotate-back 10000ms linear infinite alternate;animation:rotate-back 10000ms linear infinite alternate;
}/*weight*/#weight {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat -371px -564px;width:34px;height:92px;position:absolute;left:1px;bottom:0;-webkit-animation:up 10000ms linear infinite alternate;-moz-animation:up 10000ms linear infinite alternate;-ms-animation:up 10000ms linear infinite alternate;animation:up 10000ms linear infinite alternate;
}#shadowweight {width:10px;height:80px;position:absolute;left:12px;bottom:0px;-webkit-animation:up 10000ms linear infinite alternate;-moz-animation:up 10000ms linear infinite alternate;-ms-animation:up 10000ms linear infinite alternate;animation:up 10000ms linear infinite alternate;
}/*chain*/#chain-circle {background:url('http://www.xyhtml5.com/examples/3164/css/FgFnjks.png') no-repeat -371px -706px;width:146px;height:147px;position:absolute;left:17px;top:102px;-webkit-animation:rotate 10000ms linear infinite alternate;-moz-animation:rotate 10000ms linear infinite alternate;-ms-animation:rotate 10000ms linear infinite alternate;animation:rotate 10000ms linear infinite alternate;
}#chain {width:1px;height:380px;border-left:2px dotted #C8D94A;position:absolute;left:17px;top:175px;opacity:0.7;-webkit-animation:collapse 10000ms linear infinite alternate;-moz-animation:collapse 10000ms linear infinite alternate;-ms-animation:collapse 10000ms linear infinite alternate;animation:collapse 10000ms linear infinite alternate;
}/*ANIMATIONS*//*rotate*/@keyframes "rotate"{from {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}
}@-moz-keyframes rotate{from {-moz-transform:rotate(0deg);transform:rotate(0deg);}to {-moz-transform:rotate(360deg);transform:rotate(360deg);}
}@-webkit-keyframes "rotate"{from {-webkit-transform:rotate(0deg);transform:rotate(0deg);}to {-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}@-ms-keyframes "rotate"{from {-ms-transform:rotate(0deg);transform:rotate(0deg);}to {-ms-transform:rotate(360deg);transform:rotate(360deg);}
}@-o-keyframes "rotate"{from {-o-transform:rotate(0deg);transform:rotate(0deg);}to {-o-transform:rotate(360deg);transform:rotate(360deg);}
}/*rotate-back*/@keyframes "rotate-back"{from {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to {-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}
}@-moz-keyframes rotate-back{from {-moz-transform:rotate(0deg);transform:rotate(0deg);}to {-moz-transform:rotate(-360deg);transform:rotate(-360deg);}
}@-webkit-keyframes "rotate-back"{from {-webkit-transform:rotate(0deg);transform:rotate(0deg);}to {-webkit-transform:rotate(-360deg);transform:rotate(-360deg);}
}@-ms-keyframes "rotate-back"{from {-ms-transform:rotate(0deg);transform:rotate(0deg);}to {-ms-transform:rotate(-360deg);transform:rotate(-360deg);}
}@-o-keyframes "rotate-back"{from {-o-transform:rotate(0deg);transform:rotate(0deg);}to {-o-transform:rotate(-360deg);transform:rotate(-360deg);}
}/*weight up*/@keyframes "up"{from {bottom:0px;}to {bottom:340px;}
}@-moz-keyframes up{from {bottom:0px;}to {bottom:340px;}
}@-webkit-keyframes "up"{from {bottom:0px;}to {bottom:340px;}
}@-ms-keyframes "up"{from {bottom:0px;}to {bottom:340px;}
}@-o-keyframes "up"{from {bottom:0px;}to {bottom:340px;}
}/*chain up and down*/@keyframes "collapse"{from {height:387px;}to {height:48px;}
}@-moz-keyframes collapse{from {height:387px;}to {height:48px;}
}@-webkit-keyframes "collapse"{from {height:387px;}to {height:48px;}
}@-ms-keyframes "collapse"{from {height:387px;}to {height:48px;}
}@-o-keyframes "collapse"{from {height:387px;}to {height:48px;}
}

下面是我Codepen上这个实例的实际效果。

height="500" width="600px" scrolling="no" src="//codepen.io/G-Dragon/embed/WxrQJj/?height=598&theme-id=0&default-tab=result&embed-version=2" allowfullscreen="true">See the Pen <a href="http://codepen.io/G-Dragon/pen/WxrQJj/">WxrQJj</a> by G.Dragon (<a href="http://codepen.io/G-Dragon">@G-Dragon</a>) on <a href="http://codepen.io">CodePen</a>.&#10;

HTML5模拟齿轮动画相关推荐

  1. HTML绘制齿轮,HTML5模拟齿轮动画代码实例

    HTML代码 css代码#level{ width:100%; height:1px; position:absolute; top:50%; } #content{ text-align:cente ...

  2. html滚轮下拉动画,html5+css3齿轮滚动动画代码

    HTML5制作齿轮滚动动画效果. 文件引用: setInterval(function () { move('.sec4-img-1').set('bottom', '300px').set('opa ...

  3. html5绘制菱形,HTML5 canvas 菱形动画齿轮 - 开源中国

    原创. 通过 HTML5 canvas 创造由18个菱形构成的齿轮,并产生动画效果. An animation is made of the wheel consisting 18 diamends. ...

  4. 8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用

    今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画 如 ...

  5. html流程svg动画,12款基于SVG的HTML5应用和动画

    本文作者html5tricks,转载请注明出处 SVG是HTML的扩展标记语言,利用SVG可以做非常多的矢量动画,结合 1.HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷 这次我们要分享的这款HTML ...

  6. 16款最佳HTML5超酷动画演示及源码

    1.HTML5/CSS3图片选择动画 可选择多张图片 之前我们已经分享过几款很酷的HTML5图片特效,像HTML5 3D图片折叠特效.HTML5 3D旋转图片相册等应用.今天我们来分享一款既炫酷又实用 ...

  7. 哈哈，又找到几个强大的html5+css3的动画效果

    一周HTML5经典回顾 31个别出心裁的HTML5动画 40,425 人浏览 发表回复 13 又是一周即将过去,我们来精心挑选这周分享的31款别出心裁的HTML5动画,很多还比较实用,一起来看看吧. ...

  8. 好看的照片效果html,9款超绚丽的HTML5 3D图片动画特效

    1.SVG玫瑰花盛开动画 SVG还是很强大的,我们之前也分享过很多利用SVG绘制出来的各种动画特效.比如超炫酷的SVG轮船行驶动画和HTML5 SVG圆形钢琴动画都是用SVG实现的超酷动画.今天我们要 ...

  9. html5添加flash动画效果,霸气的HTML5 7款无Flash HTML5动画特效

    本文作者html5tricks,转载请注明出处 以前我们想在网页上实现一些动画特效,第一选择肯定是Flash,但是现在 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟 ...

最新文章

  1. Java设计模式（工厂模式＞抽象工厂模式和原型模式）
  2. linux如何进入单用户模式
  3. 日常工作问题解决：rhel7下配置多路径设备
  4. ESX 3.5 与License Server不定时失去连接解决方法一例
  5. pxe+kickstart无人值守安装
  6. wxWidgets：wxFilePickerCtrl类用法
  7. react+ant design Breadcrumb面包屑组件
  8. mybatis 插入数据后返回自增id
  9. 基于Spring+SpringMVC+Mybatis架构的开源博客
  10. 面向串口编程java_Java串口编程例子
  11. keil5 仿真usart窗口没有限制_多体仿真：DS SIMULIA Simpack 2021
  12. C# Winform App 获取当前路径
  13. ElementUI：dialog的遮罩层在弹出层的上面
  14. iOS UIImageView设置为圆形
  15. Halcon|通过旋转前后3维坐标点求旋转轴及旋转角度
  16. docker 部署 shipyard
  17. Android 打电话实现两种方法
  18. 程序员考公指南1-59
  19. Java处理JSON数据返回到前端的反斜杠
  20. Java：File和IO流

热门文章

  1. 2022（一等奖）B2548基于群体智慧的中国人口多情景时空仿真建模与预测
  2. 艾司博讯：拼多多机器人客服在哪里
  3. 【学习】手写数字生成
  4. solr dih有子查询时速度慢
  5. 工作小笔记——使用Cartographer建图和调优
  6. Vunlhub_Eearth
  7. nodejs控制台打印图案
  8. Apollo学习笔记（22）Dijkstra算法
  9. HTML CSS制作
  10. 你知道吗？U盘插入速度决定读写速度，看完别再用错了