基于HTML5的齿轮动画特效

left:1px; bottombottom: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; bottombottom: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;