國(guó)服第一切圖仔  github.com/chokcoco

先上張圖，如何使用純 CSS 制作如下效果？

在繼續(xù)閱讀下文之前，你可以先緩一緩。嘗試思考一下上面的效果或者動(dòng)手嘗試一下，不借助 JS ，能否巧妙的實(shí)現(xiàn)上述效果。

OK，繼續(xù)。這個(gè)效果是我在業(yè)務(wù)開(kāi)發(fā)的過(guò)程中遇到的一個(gè)類似的小問(wèn)題。其實(shí)即便讓我借助 Javascript ，我的第一反應(yīng)也是，感覺(jué)很麻煩啊。所以我一直在想，有沒(méi)有可能只使用 CSS 完成這個(gè)效果呢？

定義需求

我們定義一下簡(jiǎn)單的規(guī)則，要求如下：

假設(shè) HTML 結(jié)構(gòu)如下：

<ul>
  <li>不可思議的CSS</li>
  <li>導(dǎo)航欄</li>
  <li>光標(biāo)小下劃線跟隨</li>
  <li>PURE CSS</li>
  <li>Nav Underline</li>
</ul>

• 導(dǎo)航欄目的 li 的寬度是不固定的
• 當(dāng)從導(dǎo)航的左側(cè) li 移向右側(cè) li ，下劃線從左往右移動(dòng)。同理，當(dāng)從導(dǎo)航的右側(cè) li 移向左側(cè) li ，下劃線從右往左移動(dòng)。

實(shí)現(xiàn)需求

第一眼看到這個(gè)效果，感覺(jué)這個(gè)跟隨動(dòng)畫，僅靠 CSS 是不可能完成的。

如果想只用 CSS 實(shí)現(xiàn)，只能另辟蹊徑，使用一些討巧的方法。

好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成這個(gè)效果。分析一下難點(diǎn)：

寬度不固定

第一個(gè)難點(diǎn)， li 的寬度是不固定的。所以，我們可能需要從 li 本身的寬度上做文章。

既然每個(gè) li 的寬度不一定，那么它對(duì)應(yīng)的下劃線的長(zhǎng)度，肯定是是要和他本身相適應(yīng)的。自然而然，我們就會(huì)想到使用它的 border-bottom 。

li {
    border-bottom: 2pxsolid#000;
}

那么，可能現(xiàn)在是這樣子的（li 之間是相連在一起的，li 間的間隙使用 padding 產(chǎn)生）：

當(dāng)然，這里一開(kāi)始都是沒(méi)有下劃線的，所以我們可能需要把他們給隱藏起來(lái)。

li {
    border-bottom: 0pxsolid#000;
}

推翻重來(lái)，借助偽元素

這樣好像不行，因?yàn)殡[藏之后，hover li 的時(shí)候，需要下劃線動(dòng)畫，而 li 本身肯定是不能移動(dòng)的。所以，我們考慮借助偽元素。將下劃線作用到每個(gè) li 的偽元素之上。

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom: 2pxsolid#000;
}

下面考慮第一步的動(dòng)畫，hover 的時(shí)候，下劃線要從一側(cè)運(yùn)動(dòng)展開(kāi)。所以，我們利用絕對(duì)定位，將 li 的偽元素的寬度設(shè)置為0，在 hover 的時(shí)候，寬度從 width: 0 -> width: 100% ，CSS 如下：

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-bottom: 2pxsolid#000;
}

li:hover::before {
    width: 100%;
}

得到，如下效果：

OK，感覺(jué)離成功近了一步?，F(xiàn)在還剩下一個(gè)最難的問(wèn)題：

如何讓線條跟隨光標(biāo)的移動(dòng)動(dòng)作，實(shí)現(xiàn)當(dāng)從導(dǎo)航的左側(cè) li 移向右側(cè) li ，下劃線從左往右移動(dòng)。同理，當(dāng)從導(dǎo)航的右側(cè) li 移向左側(cè) li ，下劃線從右往左移動(dòng)。

我們仔細(xì)看看，現(xiàn)在的效果：

當(dāng)從第一個(gè) li 切換到第二個(gè) li 的時(shí)候，第一個(gè) li 下劃線收回的方向不正確。所以，可以能我們需要將下劃線的初始位置位移一下，設(shè)置為 left: 100% ，這樣每次下劃線收回的時(shí)候，第一個(gè) li 就正確了：

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2pxsolid#000;
}

li:hover::before {
    left: 0;
    width: 100%;
}

看看效果：

額，仔細(xì)對(duì)比兩張圖，第二種效果其實(shí)是撿了芝麻丟了西瓜。第一個(gè) li 的方向是正確了，但是第二個(gè) li 下劃線的移動(dòng)方向又錯(cuò)誤了。

所以，我們迫切需要一種方法，能夠不改變當(dāng)前 hover 的 li 的下劃線移動(dòng)方式卻能改變它下一個(gè) li 的下劃線的移動(dòng)方式（好繞口）。

沒(méi)錯(cuò)了，這里我們可以借助 ~ 選擇符，完成這個(gè)艱難的使命，也是這個(gè)例子中，最最重要的一環(huán)。

對(duì)于當(dāng)前 hover 的 li ，其對(duì)應(yīng)偽元素的下劃線的定位是 left: 100% ，而對(duì)于 li:hover ~ li::before ，它們的定位是 left: 0 。CSS 代碼大致如下：

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2pxsolid#000;
    transition: 0.2salllinear;
}

li:hover::before {
    width: 100%;
    left: 0;
}

li:hover~li::before {
    left: 0;
}

至此，我們想要的效果就實(shí)現(xiàn)拉！撒花?？纯矗?/p>

效果不錯(cuò)，就是有點(diǎn)僵硬，我們可以 適當(dāng)改變緩動(dòng)函數(shù) 以及加上一個(gè) 動(dòng)畫延遲 ，就可以實(shí)現(xiàn)上述開(kāi)頭里的那個(gè)效果了。當(dāng)然，這些都是錦上添花的點(diǎn)綴。

完整的DEMO可以戳這里: CodePen --Demo

最后

本方法 最大的瑕疵 在于一開(kāi)始進(jìn)入第一個(gè) li 的時(shí)候，線條只能是從右往左，除此之外，都能很好的實(shí)現(xiàn)跟隨效果。

許久沒(méi)更新了，最近沉迷學(xué)習(xí)區(qū)塊鏈相關(guān)技術(shù)，譬如以太坊編程，智能合約的編寫巴拉巴拉的。后面還是會(huì)把更多精力放在本行，多出一些前端文章，CSS 的魅力還是無(wú)法抵擋的。

更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。

總結(jié)

以上所述是小編給大家介紹的不可思議的CSS導(dǎo)航欄下劃線跟隨效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論