CSS3 圆转动 特效

<style>
.c2{ background:#FFF; padding:55px 0; overflow:hidden;}
.yuan { width:1000px; margin:40px auto; overflow:hidden;}
.yuan li{ float:left; width:125px; height:125px; position:relative; background:url(b.png) no-repeat 0 125px; margin-left:20px; display:inline;}
.yuan li.mgl0{ margin-left:0px;}
.yuan li span{ text-align:center; font-size:20px; display:block; margin-top:40px; color:#333;}
.yuan li span i{ font-size:12px; font-style:normal; display:block; color:#333;}
.yuan li u{position: absolute;width:125px;height:125px; left:0px; top:0px; background: url(yuan.png) no-repeat; 
    -webkit-transition: all .4s ease-in-out 0s;
    -moz-transition: all .4s ease-in-out 0s;
    -ms-transition: all .4s ease-in-out 0s;
    -o-transition: all .4s ease-in-out 0s;
    transition: all .4s ease-in-out .1s;
}
.yuan li:hover{
    background-position:0 0;
    -webkit-transition: all .3s ease-in-out .3s;
    -moz-transition: all .5s ease-in-out .3s;
    -ms-transition: all .5s ease-in-out .3s;
    -o-transition: all .5s ease-in-out .3s;
    transition: all .4s ease-in-out .3s
}
.yuan li:hover span{
    color:#FFF;
    -webkit-transition: all .3s ease-in-out .3s;
    -moz-transition: all .5s ease-in-out .3s;
    -ms-transition: all .5s ease-in-out .3s;
    -o-transition: all .5s ease-in-out .3s;
    transition: all .4s ease-in-out .3s
}
.yuan li:hover span i{color:#FFF;}
.yuan li u.cl { clip: rect(0px, 125px, 125px, 62.5px);}
.yuan li u.cr { clip: rect(0px, 62.5px, 125px, 0px); }
.yuan li:hover u.cl{ clip: rect(0px, 125px, 0px, 62.5px);background: url(yuanon.png) no-repeat; }
.yuan li:hover u.cr { clip: rect(125px, 62.5px,125px, 0px);background: url(yuanon.png) no-repeat;  }
<style>
HTML
<ul class="yuan">
  <li class="mgl0"> <a href=""> <u class="cl"></u> <u class="cr"></u> <span>王先生<i>财产纠纷</i></span> </a> </li>
  <li> <a href=""> <u class="cl"></u> <u class="cr"></u> <span>王先生<i>财产纠纷</i></span> </a> </li>
  <li> <a href=""> <u class="cl"></u> <u class="cr"></u> <span>王先生<i>财产纠纷</i></span> </a> </li>
  <li> <a href=""> <u class="cl"></u> <u class="cr"></u> <span>王先生<i>财产纠纷</i></span> </a> </li>
  <li> <a href=""> <u class="cl"></u> <u class="cr"></u> <span>王先生<i>财产纠纷</i></span> </a> </li>
  <li> <a href=""> <u class="cl"></u> <u class="cr"></u> <span>王先生<i>财产纠纷</i></span> </a> </li>
  <li> <a href=""> <u class="cl"></u> <u class="cr"></u> <span>王先生<i>财产纠纷</i></span> </a> </li>
</ul>