CSS3：转动的齿轮

demo：http://download.csdn.net/detail/jyy_12/3841695

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>