純CSS實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨滑動(dòng)效果

發(fā)布時(shí)間：2018-03-29 16:20:42 作者：佚名

我要評論

這篇文章主要介紹了純CSS實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨滑動(dòng)效果,需要的朋友可以參考下

老規(guī)矩先上張圖，如何使用純 CSS 制作如下效果？

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

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

定義需求

我們定義一下簡單的規(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è)效果，感覺這個(gè)跟隨動(dòng)畫，僅靠 CSS 是不可能完成的。

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

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

寬度不固定

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

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

li {
    border-bottom: 2px solid #000;
}

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

默認(rèn)隱藏，動(dòng)畫效果

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

li {
    border-bottom: 0px solid #000;
}

推翻重來，借助偽元素

這樣好像不行，因?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: 2px solid #000;
}

下面考慮第一步的動(dòng)畫，hover 的時(shí)候，下劃線要從一側(cè)運(yùn)動(dòng)展開。所以，我們利用絕對定位，將 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: 2px solid #000;
}
li:hover::before {
    width: 100%;
}

得到，如下效果：

左移左出，右移右出

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

如何讓線條跟隨光標(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: 2px solid #000;
}
li:hover::before {
    left: 0;
    width: 100%;
}

看看效果：

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

神奇的 ~ 選擇符

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

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

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

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
    transition: 0.2s all linear;
}
li:hover::before {
    width: 100%;
    left: 0;
}
li:hover ~ li::before {
    left: 0;
}

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