教程| HTML5模拟齿轮动画

Posted 朗妹儿

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了教程| 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) 7px7px10px;

}

#title p{

         font-family: sans-serif;

         font-size:1.2em;

         line-height:148%;

         text-shadow:rgba(0, 0, 0, 0.36) 1px1px0px;

}

 

.shadow{

         -webkit-box-shadow: 4px7px25px10pxrgba(43, 36, 0, 0.36);

         -moz-box-shadow: 4px7px25px10pxrgba(43, 36, 0, 0.36);

         box-shadow: 4px7px25px10pxrgba(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 -371px0;

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

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

 }

}


原文链接（源码下载和效果展示）：

http://www.codeceo.com/article/html5-gear-animation.html


如果大家有问题或者想了解

更多的技术干货也可以

扫描下方二维码添加朗妹儿微信

即可直接与我沟通啦~ 


▼
往期精彩回顾
▼




（文章素材来源码农网，侵权请联系删除，谢谢）

以上是关于教程| HTML5模拟齿轮动画的主要内容，如果未能解决你的问题，请参考以下文章

HTML5物理实验 CSS3模拟齿轮转动

HTML5培训教程学习之动效制作

scratch少儿编程实例教程（模拟动画片项目式教学）——幻影菲菲龙

纯 CSS3 模拟 iPhone 背景切换动画

七款炫酷的页面特效

10个超绚丽的HTML5动画赏析