Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
1346 lines (1336 sloc) 29.6 KB
layout title date categories tags
post
HTML5纯用CSS模拟齿轮动画(转载)
2016-03-01 05:28:09 -0800
Coding
CSS HTML ZZ

转载自HTML5模拟齿轮动画. 效果参见.

这篇文章介绍了纯使用HTML5和CSS3来模拟物理齿轮动画. 十分有趣, 值得学习. 主要是CSS部分使用animation来实现动画.

<style type="text/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(http://www.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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; } } </style>

HTML5 部分

<div id="level">
<div id="content">
<div id="gears">
<div id="gears-static"><font size="3"></font></div>
<div id="gear-system-1">
<div id="shadow15" class="shadow"><font size="3"></font></div>
<div id="gear15"><font size="3"></font></div>
<div id="shadow14" class="shadow"><font size="3"></font></div>
<div id="gear14"><font size="3"></font></div>
<div id="shadow13" class="shadow"><font size="3"></font></div>
<div id="gear13"><font size="3"></font></div>
</div>
<div id="gear-system-2">
<div id="shadow10" class="shadow"><font size="3"></font></div>
<div id="gear10"><font size="3"></font></div>
<div id="shadow3" class="shadow"><font size="3"></font></div>
<div id="gear3"><font size="3"></font></div>
</div>
<div id="gear-system-3">
<div id="shadow9" class="shadow"><font size="3"></font></div>
<div id="gear9"><font size="3"></font></div>
<div id="shadow7" class="shadow"><font size="3"></font></div>
<div id="gear7"><font size="3"></font></div>
</div>
<div id="gear-system-4">
<div id="shadow6" class="shadow"><font size="3"></font></div>
<div id="gear6"><font size="3"></font></div>
<div id="gear4"><font size="3"></font></div>
</div>
<div id="gear-system-5">
<div id="shadow12" class="shadow"><font size="3"></font></div>
<div id="gear12"><font size="3"></font></div>
<div id="shadow11" class="shadow"><font size="3"></font></div>
<div id="gear11"><font size="3"></font></div>
<div id="shadow8" class="shadow"><font size="3"></font></div>
<div id="gear8"><font size="3"></font></div>
</div>
<div id="shadow1" class="shadow"><font size="3"></font></div>
<div id="gear1"><font size="3"></font></div>
<div id="gear-system-6">
<div id="shadow5" class="shadow"><font size="3"></font></div>
<div id="gear5"><font size="3"></font></div>
<div id="gear2"><font size="3"></font></div>
</div>
<div id="shadowweight" class="shadow"><font size="3"></font></div>
<div id="chain-circle"><font size="3"></font></div>
<div id="chain"><font size="3"></font></div>
<div id="weight"><font size="3"></font></div>
</div>
</div>
</div>

CSS3 部分

<font size="3">#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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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.html5tricks.com/demo/jiaoben1984/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;
}
}</font>

You can’t perform that action at this time.