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條邊的特效效果了