HTML5模拟齿轮动画

本文由码农网– 小峰原创，转载请看清文末的转载要求，欢迎参与我们的付费投稿计划！

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

在线演示源码下载

HTML代码

<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>

CSS代码

#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(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(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(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(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(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(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(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(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(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(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(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(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(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(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(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(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(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(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; }}

在线演示源码下载