Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
1347 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来实现动画.

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

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>