欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css3+偽元素如何實現(xiàn)鼠標(biāo)移入時下劃線向兩邊展開的效果

這篇文章主要介紹了css3+偽元素如何實現(xiàn)鼠標(biāo)移入時下劃線向兩邊展開的效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)：從2013年開始為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù)，為上千公司企業(yè)提供了專業(yè)的網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計和網(wǎng)站推廣服務(wù)， 按需求定制網(wǎng)站由設(shè)計師親自精心設(shè)計，設(shè)計的效果完全按照客戶的要求，并適當(dāng)?shù)奶岢龊侠淼慕ㄗh，擁有的視覺效果，策劃師分析客戶的同行競爭對手，根據(jù)客戶的實際情況給出合理的網(wǎng)站構(gòu)架，制作客戶同行業(yè)具有領(lǐng)先地位的。

先來看看效果圖：

css3+偽元素如何實現(xiàn)鼠標(biāo)移入時下劃線向兩邊展開的效果css3+偽元素如何實現(xiàn)鼠標(biāo)移入時下劃線向兩邊展開的效果css3+偽元素如何實現(xiàn)鼠標(biāo)移入時下劃線向兩邊展開的效果

實現(xiàn)思路：

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

實現(xiàn)方法：

1、首先定義一個塊狀元素（行內(nèi)元素沒有寬高）并修改樣式為一個背景色為淺灰色的矩形，設(shè)置相對定位。

html代碼

<div id="underline"></div>

css樣式

#underline{

    width: 200px;

    height: 50px;

    background: #ddd;

    margin: 20px;

    position: relative;

}

2、設(shè)置:before和:after兩個偽元素，將其設(shè)置為背景色為藍(lán)色（也就是下劃線的顏色），利用絕對定位將兩個元素固定到#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、設(shè)置鼠標(biāo)移入效果。

css樣式

#underline:hover:before{/*動畫效果是從中間向左延伸至50%的寬度*/

    left:0%; 

    width:50%;

}

#underline:hover:after{/*動畫效果是從中間向右延伸至50%的寬度*/

    left: 50%; /*這句多余，主要是為了對照*/

    width: 50%;

}

優(yōu)化

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

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%就可以實現(xiàn)，從而達(dá)到了精簡代碼的目的，而且還多余出了:before方便進行別的操作。

完整代碼

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>鼠標(biāo)移入下劃線展開</title>

    <style type="text/css">

        #underline{

            width: 200px;

            height: 50px;

            background: #ddd;

            margin: 20px;

            position: relative;

        }

        #underline:after{

            content: "";

            width: 0;

            height: 5px;

            background: blue;

            position: absolute;

            top: 100%;

            left: 50%;

            transition: all .8s;

        }

        #underline:hover:after{

            left: 0%;

            width: 100%;

        }

    </style>

</head>

<body>

    <div id="underline"></div>

</body>

</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css3+偽元素如何實現(xiàn)鼠標(biāo)移入時下劃線向兩邊展開的效果”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

新聞名稱：css3+偽元素如何實現(xiàn)鼠標(biāo)移入時下劃線向兩邊展開的效果
文章鏈接：http://chinadenli.net/article12/ppgdgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、響應(yīng)式網(wǎng)站、品牌網(wǎng)站建設(shè)、外貿(mào)建站、、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司