• • HTML代碼
  • 定位問題
  • 分析動畫
  • css代碼

最近在慕課網上看到了一個按鈕特效，覺得挺好看的，記錄一下。

簡單分析一下就是鼠標移入的時候有四條線分別從四個方向移入，橫向的兩條線寬度和位置發生變化，縱向的兩條線高度和位置發生變化。

HTML代碼

<a href="#" class="button"><span class="line line-top"></span><span class="line line-right"></span><span class="line line-bottom"></span><span class="line line-left"></span>GET STARTED</a>

定位問題

a元素作為父元素，定位為relative，讓span元素相對于它定位，span元素定位為absolute。a元素是內聯元素，我需要給它設置寬和高，所以需要改變它的display屬性。然后給span元素加上過渡屬性。

a{display: inline-block;width: 300px;height: 80px;line-height: 80px;color: #fff;border: 2px solid #fff;position: relative;}.line{position: absolute;transition:all .2s ease-in;background-color: #fff;}

分析動畫

以.line-top為例，可以看到，這條線從左邊飛入，它的高度等于a元素的border值，寬度由0過渡到a元素的寬度值，初始位置可以根據情況寫，我定義的初始位置是從left:-100%開始，最終位置到left:-2px。這里不能到left:0， 這個原因其實用圖比較好解釋。我特意用紅色顯示span元素，應該可以很清楚的看到，線條沒有完全重合，因為a元素的border影響了它實際的寬度和高度，所以對于.line-top這條線，它的位置應該是top:-2px,left:-2px。

.line-top{width: 0;height: 2px;left: -100%;top:-2px;}.button:hover .line-top{width: 300px;left: -2px;}

其他三條線跟它是類似的，可以自己研究寫出來，我貼出完整的css樣式代碼：

css代碼

.button{display: inline-block;width: 300px;height: 80px;line-height: 80px;color: #73A238;border: 2px solid #73A238;position: relative;transition:all .2s ease-in;} .button:hover{text-decoration: none;border: 2px solid #fff;color: #fff; }.line{position: absolute;transition:all .2s ease-in;background-color: #fff;}.line-top{width: 0;height: 2px;left: -100%;top:-2px;}.button:hover .line-top{width: 300px;left: -2px;}.line-bottom{width: 0;height: 2px;right: -100%;bottom:-2px;}.button:hover .line-bottom{width: 300px;right: -2px;}.line-right{width: 2px;height: 0;top: -100%;right:-2px;}.button:hover .line-right{height: 80px;top: -2px;}.line-left{width: 2px;height: 0;bottom: -100%;left:-2px;}.button:hover .line-left{height: 80px;bottom: -2px;}

總結

以上是生活随笔為你收集整理的使用CSS3实现按钮特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。