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>