首頁  >  文章  >  web前端  >  詳解css3和偽元素實現滑鼠移入時底線向兩邊展開

詳解css3和偽元素實現滑鼠移入時底線向兩邊展開

小云云
小云云原創
2017-12-19 11:36:261741瀏覽

本文主要介紹了利用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>



相關推薦:

JavaScript實作類似拉勾網的滑鼠移入移出效果

純JS程式碼實作隔行變色滑鼠移入高亮

javascript表格隔行變色加滑鼠移入移出及點選效果的方法_javascript技巧

#

以上是詳解css3和偽元素實現滑鼠移入時底線向兩邊展開的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn