基于css3的半圆边框收缩和展开动画

        基于css3的半圆边框收缩和展开动画，先看下效果图：


       原本是一个完整的圆，当鼠标移动到上面，两边的半圆开始消失。主要借助了css3的transition动画和css的clip裁切。

        html代码：

<div class="wrap">
	<div class="innerLeft"></div>
	<div class="innerRight"></div>
</div>

          css代码：

.wrap div{
    display: block;
    position: absolute;
    width: 156px;
    height: 156px;
	margin-left: 22px;
    background: url(words.png) no-repeat 0 -363px;
    transition: all .5s ease-in-out 0s;
}
.innerLeft{clip: rect(0px,156px,156px,78px);}
.wrap:hover .innerLeft{clip: rect(0px,156px,-10px,78px);}
.innerRight{clip: rect(0px,78px,156px,0px);}
.wrap:hover .innerRight{clip: rect(156px,78px,156px,0px);}