我爱模板网 > 建站教程 > 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);}



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:HTML5 Video标签的属性、方法和事件汇总介绍 下一篇:移动端H5页面的设计稿尺寸大小规范
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢