CSS3实现幽灵按钮（下）

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条边的特效效果了