css齿轮转动效果

 利用css3创建齿轮转动效果

<svg class="guaongRudderOne">
    <circle class="guaongRudderLine" cx="50" cy="50" r="40" fill="#00aaff"/>
    <line class="guaongRudderLine" x1="7" y1="25" x2="93" y2="75" stroke="#00aaff" stroke-width="15"/>                 
    <line class="guaongRudderLine" x1="75" y1="7" x2="25" y2="93" stroke="#00aaff" stroke-width="15"/>
    <line class="guaongRudderLine" x1="25" y1="7" x2="75" y2="93" stroke="#00aaff" stroke-width="15"/>
    <line class="guaongRudderLine" x1="93" y1="25" x2="7" y2="75" stroke="#00aaff" stroke-width="15"/>
    <line class="guaongRudderLine" x1="0" y1="50" x2="100" y2="50" stroke="#00aaff" stroke-width="15"/>
    <line class="guaongRudderLine" x1="50" y1="0" x2="50" y2="100" stroke="#00aaff" stroke-width="15"/>
    <circle class="guaongRudderLine" cx="50" cy="50" r="15" fill="#fff"/>
</svg>
<style>
.guaongRudderOne{
  width: 100px;
  height: 100px;
  animation: budder1 2s infinite;
  -webkit-animation: budder1 2s infinite; /* Safari 与 Chrome */
}
@keyframes budder1{
  0%{
    transform:rotate(0deg);
    -ms-transform:rotate(0deg); /* IE 9 */
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
  }
  10%{
    transform:rotate(9deg);
    -ms-transform:rotate(9deg); /* IE 9 */
    -webkit-transform:rotate(9deg); /* Safari and Chrome */
  }
  20%{
    transform:rotate(18deg);
    -ms-transform:rotate(18deg); /* IE 9 */
    -webkit-transform:rotate(18deg); /* Safari and Chrome */
  }
  30%{
    transform:rotate(27deg);
    -ms-transform:rotate(27deg); /* IE 9 */
    -webkit-transform:rotate(27deg); /* Safari and Chrome */
  }
  40%{
    transform:rotate(36deg);
    -ms-transform:rotate(36deg); /* IE 9 */
    -webkit-transform:rotate(36deg); /* Safari and Chrome */
  }
  50%{
    transform:rotate(45deg);
    -ms-transform:rotate(45deg); /* IE 9 */
    -webkit-transform:rotate(45deg); /* Safari and Chrome */
  }
  60%{
    transform:rotate(54deg);
    -ms-transform:rotate(54deg); /* IE 9 */
    -webkit-transform:rotate(54deg); /* Safari and Chrome */
  }
  70%{
    transform:rotate(63deg);
    -ms-transform:rotate(63deg); /* IE 9 */
    -webkit-transform:rotate(63deg); /* Safari and Chrome */
  }
  80%{
    transform:rotate(72deg);
    -ms-transform:rotate(72deg); /* IE 9 */
    -webkit-transform:rotate(72deg); /* Safari and Chrome */
  }
  90%{
    transform:rotate(81deg);
    -ms-transform:rotate(81deg); /* IE 9 */
    -webkit-transform:rotate(81deg); /* Safari and Chrome */
  }
  100%{
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); /* IE 9 */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
  }
}

</style>