一团网资讯
一团资讯 > html5 > 基于HTML5的齿轮动画特效
基于HTML5的齿轮动画特效
-02-03 02:53:00 发布者：来源网络
这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现的。
HTML代码
XML/HTML Code复制内容到剪贴板
CSS代码
CSS Code复制内容到剪贴板
#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;
bottombottom:5px;
rightright:0px;
opacity:0.4;
}
#title{
vertical-align:middle;
color:#9EB7B5;
width:43%;
display:inline-block;
}
#titleh1{
font-family:'PTSansNarrowBold',sans-serif;
font-size:3.6em;
text-shadow:rgba(0,0,0,0.36)7px7px10px;
}
#titlep{
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);
}
#gear15{
background:url(FgFnjks.png)no-repeat0-993px;
width:321px;
height:321px;
position:absolute;
left:45px;
top:179px;
-webkit-animation:rotate-back24000mslinearinfinite;
-moz-animation:rotate-back24000mslinearinfinite;
-ms-animation:rotate-back24000mslinearinfinite;
animation:rotate-back24000mslinearinfinite;
}
#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-repeat0-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-repeat0-744px;
width:62px;
height:62px;
position:absolute;
left:174px;
top:309px;
-webkit-animation:rotate8000mslinearinfinite;
-moz-animation:rotate8000mslinearinfinite;
-ms-animation:rotate8000mslinearinfinite;
animation:rotate8000mslinearinfinite;
}
#shadow13{
width:36px;
height:36px;
-webkit-border-radius:18px;
-moz-border-radius:18px;
border-radius:18px;
position:absolute;
left:187px;
top:322px;
}
#gear10{
background:url(FgFnjks.png)no-repeat0-184px;
width:122px;
height:122px;
position:absolute;
left:175px;
top:0;
-webkit-animation:rotate-back8000mslinearinfinite;
-moz-animation:rotate-back8000mslinearinfinite;
-ms-animation:rotate-back8000mslinearinfinite;
animation:rotate-back8000mslinearinfinite;
}
#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-repeat0-1493px;
width:85px;
height:84px;
position:absolute;
left:194px;
top:19px;
-webkit-animation:rotate10000mslinearinfinite;
-moz-animation:rotate10000mslinearinfinite;
-ms-animation:rotate10000mslinearinfinite;
animation:rotate10000mslinearinfinite;
}
#shadow3{
width:60px;
height:60px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
position:absolute;
left:206px;
top:31px;
}
#gear9{
background:url(FgFnjks.png)no-repeat-371px-280px;
width:234px;
height:234px;
position:absolute;
left:197px;
top:96px;
-webkit-animation:rotate12000mslinearinfinite;
-moz-animation:rotate12000mslinearinfinite;
-ms-animation:rotate12000mslinearinfinite;
animation:rotate12000mslinearinfinite;
}
#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-back10000mslinearinfinite;
-moz-animation:rotate-back10000mslinearinfinite;
-ms-animation:rotate-back10000mslinearinfinite;
animation:rotate-back10000mslinearinfinite;
}
#shadow7{
width:76px;
height:76px;
-webkit-border-radius:38px;
-moz-border-radius:38px;
border-radius:38px;
position:absolute;
left:276px;
top:175px;
}
#gear6{
background:url(FgFnjks.png)no-repeat0-1931px;
width:134px;
height:134px;
position:absolute;
left:305px;
bottombottom:212px;
-webkit-animation:rotate-back10000mslinearinfinite;
-moz-animation:rotate-back10000mslinearinfinite;
-ms-animation:rotate-back10000mslinearinfinite;
animation:rotate-back10000mslinearinfinite;
}
#shadow6{
width:98px;
height:98px;
-webkit-border-radius:49px;
-moz-border-radius:49px;
border-radius:49px;
position:absolute;
left:323px;
bottombottom:230px;
}
#gear4{
background:url(FgFnjks.png)no-repeat0-1627px;
width:69px;
height:69px;
position:absolute;
left:337px;
bottombottom:245px;
-webkit-animation:rotate-back10000mslinearinfinite;
-moz-animation:rotate-back10000mslinearinfinite;
-ms-animation:rotate-back10000mslinearinfinite;
animation:rotate-back10000mslinearinfinite;
}
#gear12{
background:url(FgFnjks.png)no-repeat0-530px;
width:164px;
height:164px;
position:absolute;
left:208px;
bottombottom:85px;
-webkit-animation:rotate8000mslinearinfinite;
-moz-animation:rotate8000mslinearinfinite;
-ms-animation:rotate8000mslinearinfinite;
animation:rotate8000mslinearinfinite;
}
#shadow12{
width:124px;
height:124px;
-webkit-border-radius:62px;
-moz-border-radius:62px;
border-radius:62px;
position:absolute;
left:225px;
bottombottom:107px;
}
#gear11{
background:url(FgFnjks.png)no-repeat0-356px;
width:125px;
height:124px;
position:absolute;
left:228px;
bottombottom:105px;
-webkit-animation:rotate-back10000mslinearinfinite;
-moz-animation:rotate-back10000mslinearinfinite;
-ms-animation:rotate-back10000mslinearinfinite;
animation:rotate-back10000mslinearinfinite;
}
#shadow11{
width:88px;
height:88px;
-webkit-border-radius:44px;
-moz-border-radius:44px;
border-radius:44px;
position:absolute;
left:247px;
bottombottom:123px;
}
#gear8{
background:url(FgFnjks.png)no-repeat-371px-158px;
width:72px;
height:72px;
position:absolute;
left:254px;
bottombottom:131px;
-webkit-animation:rotate6000mslinearinfinite;
-moz-animation:rotate6000mslinearinfinite;
-ms-animation:rotate6000mslinearinfinite;
animation:rotate6000mslinearinfinite;
}
#shadow8{
width:42px;
height:42px;
-webkit-border-radius:21px;
-moz-border-radius:21px;
border-radius:21px;
position:absolute;
left:269px;
bottombottom:146px;
}
#gear1{
background:url(FgFnjks.png)no-repeat00;
width:135px;
height:134px;
position:absolute;
left:83px;
bottombottom:111px;
-webkit-animation:rotate-back10000mslinearinfinite;
-moz-animation:rotate-back10000mslinearinfinite;
-ms-animation:rotate-back10000mslinearinfinite;
animation:rotate-back10000mslinearinfinite;
}
#shadow1{
width:96px;
height:96px;
-webkit-border-radius:48px;
-moz-border-radius:48px;
border-radius:48px;
position:absolute;
left:103px;
bottombottom:130px;
}
#gear5{
background:url(FgFnjks.png)no-repeat0-1746px;
width:134px;
height:135px;
position:absolute;
left:22px;
top:108px;
-webkit-animation:rotate10000mslinearinfinitealternate;
-moz-animation:rotate10000mslinearinfinitealternate;
-ms-animation:rotate10000mslinearinfinitealternate;
animation:rotate10000mslinearinfinitealternate;
}
#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-repeat0-1364px;
width:80px;
height:79px;
position:absolute;
left:49px;
top:136px;
-webkit-animation:rotate-back10000mslinearinfinitealternate;
-moz-animation:rotate-back10000mslinearinfinitealternate;
-ms-animation:rotate-back10000mslinearinfinitealternate;
animation:rotate-back10000mslinearinfinitealternate;
}
#weight{
background:url(FgFnjks.png)no-repeat-371px-564px;
width:34px;
height:92px;
position:absolute;
left:1px;
bottombottom:0;
-webkit-animation:up10000mslinearinfinitealternate;
-moz-animation:up10000mslinearinfinitealternate;
-ms-animation:up10000mslinearinfinitealternate;
animation:up10000mslinearinfinitealternate;
}
#shadowweight{
width:10px;
height:80px;
position:absolute;
left:12px;
bottombottom:0px;
-webkit-animation:up10000mslinearinfinitealternate;
-moz-animation:up10000mslinearinfinitealternate;
-ms-animation:up10000mslinearinfinitealternate;
animation:up10000mslinearinfinitealternate;
}
#chain-circle{
background:url(FgFnjks.png)no-repeat-371px-706px;
width:146px;
height:147px;
position:absolute;
left:17px;
top:102px;
-webkit-animation:rotate10000mslinearinfinitealternate;
-moz-animation:rotate10000mslinearinfinitealternate;
-ms-animation:rotate10000mslinearinfinitealternate;
animation:rotate10000mslinearinfinitealternate;
}
#chain{
width:1px;
height:380px;
border-left:2pxdotted#C8D94A;
position:absolute;
left:17px;
top:175px;
opacity:0.7;
-webkit-animation:collapse10000mslinearinfinitealternate;
-moz-animation:collapse10000mslinearinfinitealternate;
-ms-animation:collapse10000mslinearinfinitealternate;
animation:collapse10000mslinearinfinitealternate;
}
@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-keyframesrotate{
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);
}
}
@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);
}
}
@keyframes"up"{
from{
bottombottom:0px;
}
to{
bottombottom:340px;
}
}
@-moz-keyframesup{
from{
bottombottom:0px;
}
to{
bottombottom:340px;
}
}
@-webkit-keyframes"up"{
from{
bottombottom:0px;
}
to{
bottombottom:340px;
}
}
@-ms-keyframes"up"{
from{
bottombottom:0px;
}
to{
bottombottom:340px;
}
}
@-o-keyframes"up"{
from{
bottombottom:0px;
}
to{
bottombottom:340px;
}
}
@keyframes"collapse"{
from{
height:387px;
}
to{
height:48px;
}
}
@-moz-keyframescollapse{
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;
}
}
纯CSS3实现的齿轮动画特效，希望大家喜欢。
[ 责任编辑：来源网络 ]
