CSS3实现幽灵按钮(下)
2015-06-30 19:32
453 查看
CSS3实现幽灵按钮
实现边框的特效
实现上边框的飞入效果:从效果中看,我们可以看到,飞入的边是有外部的一个点慢慢飞入,然后覆盖的与其对应边框等长等宽的线段,.button .line{ display: block; position: absolute; background: #000; }
为了方便调试,我们暂时先将边框线条的颜色设置为黑色,除此之外,边的位置与按钮的位置是相对的,因此我们需要在button属性中添加一个position属性,将其代码设置如下:
position: relative;
然后设置button-top的样式,代码如下:
.button .line-top{ width: 0; height: 2px; top: -2px; left:-110%; }
接着设置当鼠标移动过按钮时的效果:
.button:hover .line-top{ width: 100%; left: 0; }
我们可以发现,当鼠标移动到按钮上时,上边框变成黑色,但是并无飞入的效果,因此我们可以在line样式内设置其过度效果,代码如下:
transition: all 0.15s ease-in; -moz-transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in; -ms-transition: all 0.15s ease-in; -o-transition: all 0.15s ease-in;
记得将line的background属性的颜色值设置为#fff
接着我们可以依样画葫芦绘制其他三条边的特效了,代码如下:
.button .line-bottom { width: 0; height: 2px; bottom: -2px; right: -110%; } .button:hover .line-bottom{ width: 100%; right: 0; } .button .line-left{ width: 2px; height: 0; left: -2px; bottom:-110%; } .button:hover .line-left{ height: 100%; bottom: 0px; } .button .line-right{ width: 2px; height: 0; right: -2px; top: -110%; } .button:hover .line-right{ height: 100%; top: 0; }
到这里我们就绘制完了4条边的特效效果了
相关文章推荐
- 用PS实现纹理浮雕效果代码
- 用CSS实现的一张图完成的按钮效果
- css利用A标签的背景可能作出很有意思的效果第1/2页
- DIV border边框显示不完全问题的解决方法
- 纯CSS实现的漂亮的立体图片边框效果,阴影代码
- JS实现动态给图片添加边框的方法
- 百度空间的popup效果分析第1/3页
- 表现、结构、行为分离的选项卡效果
- 推荐30个新鲜出炉的精美 jQuery 效果
- 基于jQuery创建鼠标悬停效果的方法
- 无边框窗口代码详解
- 载入进度条 效果
- 图片放大镜效果代码
- 表格头固定而列可滚动的效果
- css+table 1px边框单元格
- js Li来实现的效果
- php中处理模拟rewrite 效果
- css静态滤镜 + A:Hover 效果第1/3页
- li隔行换色效果代码升级版
- Android TextView设置背景色与边框的方法详解