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