HTML5模拟齿轮动画

来源：互联网发布：赵丽颖没文化知乎编辑：程序博客网时间：2024/04/27 22:04

这是一个基于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上这个实例的实际效果。

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


1 0