介紹一個利用css3和偽元素實現滑鼠移入時底線向兩邊展開的特效程式碼

這篇文章主要介紹了利用css3+偽元素實現滑鼠移入時下劃線向兩邊展開效果的相關資料，文中先進行了詳細的介紹，方便大家理解，而後給出了完整的實例代碼讓大家可以參考學習，需要的朋友們下面來一起學習學習吧。

先來看看效果圖：

實作想法：

將偽元素:before和:after定位到元素底部中間，設定寬度從0變成100%達到目的。

實作方法：

1、先定義一個區塊狀元素（行內元素沒有寬高）並修改樣式為一個背景色為淺灰色的矩形，設定相對定位。

html程式碼

<p id="underline"></p>

css樣式

#underline{

    width: 200px;

    height: 50px;

    background: #ddd;

    margin: 20px;

    position: relative;

}

2、設定:before和:after兩個偽元素，將其設定為背景色為藍色（也就是底線的顏色），利用絕對定位將兩個元素固定在#underline底部中間位置。

css樣式

#underline:before,

#underline:after{

    content: "";/*单引号双引号都可以，但必须是英文*/

    width: 0;

    height: 3px; /*下划线高度*/

    background: blue; /*下划线颜色*/

    position: absolute;

    top: 100%;

    left: 50%;

    transition: all .8s ; /*css动画效果，0.8秒完成*/

}

3、設定滑鼠移入效果。

css樣式

#underline:hover:before{/*动画效果是从中间向左延伸至50%的宽度*/

    left:0%; 

    width:50%;

}

#underline:hover:after{/*动画效果是从中间向右延伸至50%的宽度*/

    left: 50%; /*这句多余，主要是为了对照*/

    width: 50%;

}

優化

#1、雖然目的達到了，但是用了兩個偽元素，一個向左延伸50%，一個向右延伸50%，只用一個延伸至100%能否達到目的？

css程式碼

#underline:after{

    content: "";

    width: 0;

    height: 5px;

    background: blue;

    position: absolute;

    top: 100%;

    left: 50%;

    transition: all .8s;

}

#underline:hover:after{/*原理是left:50%变成0%的同时，宽度从0%变成100%*/

    left: 0%;

    width: 100%;

}

2、只定義:after偽元素，將其從距離左邊50%寬度為0的同時改變成距離左邊0%寬度為100%就可以實現，從而達到了精簡程式碼的目的，而且還多餘出了:before方便進行別的操作。

完整程式碼

    

    

    





    <p id="underline"></p>

以上是介紹一個利用css3和偽元素實現滑鼠移入時底線向兩邊展開的特效程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！