這篇文章主要介紹了CSS3如何制作hover下劃線動(dòng)畫，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

10年積累的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有兩當(dāng)免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

1、前幾天看到Hexo的next主題標(biāo)題hover效果很炫，自己嘗試寫了一個(gè)，另一個(gè)是next的實(shí)現(xiàn)，照例先上圖

2、實(shí)現(xiàn)小黑科技

 <!-- html結(jié)構(gòu) -->
 <div>
     <a href="javascript:void(0);" class="demo1">自己實(shí)現(xiàn)的hover效果</a>
 </div>

/* css樣式 */
        .demo1{
            position: relative;
            text-decoration: none;
            font-size: 20px;
            color: #333;
        }
        .demo1:before{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;
            width: 0;
            height: 2px;
            background: #4285f4;
            transition: all .3s;
        }
        .demo1:hover:before{
            width: 100%;
            left: 0;
            right: 0;
        }

關(guān)鍵在于沒有hover的時(shí)候定義width為0，這樣可以實(shí)現(xiàn)寬度從0到100%的變化。

left為50%，目的是為了動(dòng)畫開始的位置是在50%的位置。

3、hexo next主題的官方實(shí)現(xiàn)

<!-- html結(jié)構(gòu) -->
<div>
    <a href="javascript:void(0);" class="demo2">Hexo next主題的實(shí)現(xiàn)</a>
</div>

/* css樣式 */
        .demo2{
            position: relative;
            text-decoration: none;
            font-size: 20px;
            color: #333;
        }
        .demo2:before{
            content: "";
            position: absolute;
            left: 0;
            bottom: -2px;
            height: 2px;
            width: 100%;
            background: #4285f4;
            transform: scale(0);
            transition: all 0.3s;
        }
        .demo2:hover:before{
            transform: scale(1);
        }

這個(gè)實(shí)現(xiàn)的關(guān)鍵就是scale(0)到scale(1)的變化。

CSS3的scale transform的原點(diǎn)是中點(diǎn)，所以會(huì)從中間的位置開始動(dòng)畫。

4、兩者區(qū)別

通過動(dòng)畫也看出來，next的動(dòng)畫有透明漸變的效果，和scale的表現(xiàn)形式有關(guān)。

第一個(gè)實(shí)現(xiàn)只是width變化，但是也可以用animation實(shí)現(xiàn)和next一樣的效果。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS3如何制作hover下劃線動(dòng)畫”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)頁名稱：CSS3如何制作hover下劃線動(dòng)畫
轉(zhuǎn)載注明：http://chinadenli.net/article4/goggoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、標(biāo)簽優(yōu)化、網(wǎng)站排名、網(wǎng)站營(yíng)銷、企業(yè)建站

廣告

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