齿轮转动:CSS3：转动的齿轮

body{background:#2C91AE;}
.wrap{width:600px;height:400px;padding:50px;margin:20pxauto;position:relative;}
.gear{border-radius:100px;border:1px solid #8C8C8A;width:200px;height:200px;position:relative;background-color:#FFFFFF;}
.gear span{border:1px solid #8C8C8A;display:block;width:20px;height:30px;position:absolute;border-right:none;background-color:#FFFFFF;}
.c1{left:8px;top:12px;-webkit-transform:rotate(41deg);}
.c2{left:60px;top:-21px;-webkit-transform:rotate(75deg);}
.c3{left:125px;top:-19px;-webkit-transform:rotate(110deg);}
.c4{left:177px;top:20px;-webkit-transform:rotate(144deg);}
.c5{left:198px;top:84px;-webkit-transform:rotate(181deg);}
.c6{left:176px;top:150px;-webkit-transform:rotate(216deg);}
.c7{left:125px;top:187px;-webkit-transform:rotate(250deg);}
.c8{left:55px;top:188px;-webkit-transform:rotate(288deg);}
.c9{left:0px;top:147px;-webkit-transform:rotate(325deg);}
.c10{left:-19px;top:80px;-webkit-transform:rotate(2deg);}
.gear em{background-color:#2C91AE;border-radius:20px;border:1px solid #8C8C8A;width:40px;height:40px;display:block;position:absolute;left:80px;top:80px;}
.gear{
-webkit-animation-name:run;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
}
.s{position:absolute;left:700px;top:156px;zoom:0.7;-webkit-animation-duration:3s;}
@-webkit-keyframes run
{
from
{
-webkit-transform:rotate(0deg);
}
to
{
-webkit-transform:rotate(360deg);
}
}
.line{border-width:3px 0 3px 3px;border-color:#FFFFFF;border-style:solid;width:117px;height:234px;border-radius:120px 0 0 120px;position:absolute;top:31px;left:30px;}
.line div{position:relative;border-color:#FFFFFF;border-style:solid;}
.la{border-width:3px 0 0;top:30px;left:112px;width:432px;-webkit-transform:rotate(9deg);}
.lb{border-width:3px 0 0;top:227px;left:110px;width:420px;-webkit-transform:rotate(-1deg);}
.lc{border-width:3px 3px 3px 0;width:75px;border-radius:0 79px 79px 0;height:160px;left:531px;top:61px;-webkit-transform:rotate(5deg);}
<div class="wrap">
<div class="gear">
<div class="grear_r">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
<span class="c4"></span>
<span class="c5"></span>
<span class="c6"></span>
<span class="c7"></span>
<span class="c8"></span>
<span class="c9"></span>
<span class="c10"></span>
<em></em>
</div>
</div>
<div class="gear s">
<div class="grear_r">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
<span class="c4"></span>
<span class="c5"></span>
<span class="c6"></span>
<span class="c7"></span>
<span class="c8"></span>
<span class="c9"></span>
<span class="c10"></span>
<em></em>
</div>
</div>
<div class="line">
<div class="la"></div>
<div class="lb"></div>
<div class="lc"></div>
</div>
</div>
本文链接http://www.cxybl.com/html/wyzz/CSS/20121127/34503.html