齿轮
html,body{margin:0;padding:0;width:100%;}
#wrap{margin:0;padding:150px;}
.post{width:100px;height:100px;background:#0099ff;border-radius:200px;display:block;position:relative;}
.post span{width:126px;height:16px;display:inline-block;background:#0099ff;position:absolute;top:42px;left:-13px;border-radius:5px;}
.s1{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);}
.s2{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);}
.s3{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);}
.s4{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);}
.s5{-webkit-transform:rotate(120deg);-moz-transform:rotate(120deg);}
.s6{-webkit-transform:rotate(150deg);-moz-transform:rotate(150deg);}
.y1{width:60px;height:60px;left:80px;top:0px;}
.y1 span{width:88px;height:8px;display:inline-block;background:#0099ff;position:absolute;top:26px;left:-14px;border-radius:8px;}
.y0{-webkit-animation-name:slide1;-webkit-animation-duration:10s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:slide1;-moz-animation-duration:10s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;}
@-webkit-keyframes slide1{
0%{-webkit-transform:rotate(0deg);}
50%{-webkit-transform:rotate(180deg);}
100%{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes slide1{
0%{-moz-transform:rotate(0deg);}
50%{-moz-transform:rotate(180deg);}
100%{-moz-transform:rotate(360deg);}
}
.y1{-webkit-animation-name:slide2;-webkit-animation-duration:10s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:slide2;-moz-animation-duration:10s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;}
@-webkit-keyframes slide2{
0%{-webkit-transform:rotate(0deg);}
50%{-webkit-transform:rotate(-180deg);}
100%{-webkit-transform:rotate(-360deg);}
}
@-moz-keyframes slide2{
0%{-moz-transform:rotate(0deg);}
50%{-moz-transform:rotate(-180deg);}
100%{-moz-transform:rotate(-360deg);}
}
提示：您可以先修改部分代码再运行
html css齿轮滚动特效 CSS_纯CSS3实现滚动的齿轮动画效果 纯CSS写的齿轮效果。支持chrome - phpStudy...
