首页 > 建站教程 > CSS3+HTML5 >  基于css3的半圆边框收缩和展开动画正文

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

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

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);}