【CSS】828- 純CSS導(dǎo)航欄下劃線跟隨效果
作者：chokcoco
原文：https://www.cnblogs.com/coco1s/p/8657192.html
在繼續(xù)閱讀下文之前，你可以先緩一緩。嘗試思考一下上面的效果或者動手嘗試一下，不借助 JS ，能否巧妙的實現(xiàn)上述效果。
OK，繼續(xù)。這個效果是我在業(yè)務(wù)開發(fā)的過程中遇到的一個類似的小問題。其實即便讓我借助 Javascript ，我的第一反應(yīng)也是，感覺很麻煩啊。所以我一直在想，有沒有可能只使用 CSS 完成這個效果呢？
定義需求
我們定義一下簡單的規(guī)則，要求如下：
<ul>
??<li>不可思議的CSSli>
??<li>導(dǎo)航欄li>
??<li>光標(biāo)小下劃線跟隨li>
??<li>PURE CSSli>
??<li>Nav Underlineli>
ul>
導(dǎo)航欄目的 li 的寬度是不固定的
當(dāng)從導(dǎo)航的左側(cè) li 移向右側(cè) li，下劃線從左往右移動。同理，當(dāng)從導(dǎo)航的右側(cè) li 移向左側(cè) li，下劃線從右往左移動。
實現(xiàn)需求
第一眼看到這個效果，感覺這個跟隨動畫，僅靠 CSS 是不可能完成的。如果想只用 CSS 實現(xiàn)，只能另辟蹊徑，使用一些討巧的方法。好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成這個效果。分析一下難點：
寬度不固定
第一個難點， li 的寬度是不固定的。所以，我們可能需要從 li 本身的寬度上做文章。既然每個 li 的寬度不一定，那么它對應(yīng)的下劃線的長度，肯定是是要和他本身相適應(yīng)的。自然而然，我們就會想到使用它的 border-bottom 。
li?{?border-bottom:?2px solid?#000;}
那么，可能現(xiàn)在是這樣子的（li 之間是相連在一起的，li 間的間隙使用 padding 產(chǎn)生）：
當(dāng)然，這里一開始都是沒有下劃線的，所以我們可能需要把他們給隱藏起來。
li?{?border-bottom:?0px solid?#000;}
推翻重來，借助偽元素
這樣好像不行，因為隱藏之后，hover li 的時候，需要下劃線動畫，而 li 本身肯定是不能移動的。所以，我們考慮借助偽元素。將下劃線作用到每個 li 的偽元素之上。
li::before?{
??content:?"";
??position:?absolute;
??top:?0;
??left:?0;
??width:?100%;
??height:?100%;
??border-bottom:?2px solid?#000;
}
下面考慮第一步的動畫，hover 的時候，下劃線要從一側(cè)運動展開。所以，我們利用絕對定位，將 li 的偽元素的寬度設(shè)置為0，在 hover 的時候，寬度從 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)在還剩下一個最難的問題：
如何讓線條跟隨光標(biāo)的移動動作，實現(xiàn)當(dāng)從導(dǎo)航的左側(cè) li 移向右側(cè) li，下劃線從左往右移動。同理，當(dāng)從導(dǎo)航的右側(cè) li 移向左側(cè) li，下劃線從右往左移動。
我們仔細看看，現(xiàn)在的效果：
當(dāng)從第一個 li 切換到第二個 li 的時候，第一個 li 下劃線收回的方向不正確。所以，可以能我們需要將下劃線的初始位置位移一下，設(shè)置為 left: 100%，這樣每次下劃線收回的時候，第一個 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%;
}
看看效果：
額，仔細對比兩張圖，第二種效果其實是撿了芝麻丟了西瓜。第一個 li 的方向是正確了，但是第二個 li 下劃線的移動方向又錯誤了。
神奇的 ~ 選擇符
所以，我們迫切需要一種方法，能夠不改變當(dāng)前 hover 的 li 的下劃線移動方式卻能改變它下一個 li 的下劃線的移動方式（好繞口）。
沒錯了，這里我們可以借助 ~ 選擇符，完成這個艱難的使命，也是這個例子中，最最重要的一環(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;
}
至此，我們想要的效果就實現(xiàn)拉！撒花?？纯矗?/p>
效果不錯，就是有點僵硬，我們可以適當(dāng)改變緩動函數(shù)以及加上一個動畫延遲，就可以實現(xiàn)上述開頭里的那個效果了。當(dāng)然，這些都是錦上添花的點綴。
最后
本方法最大的瑕疵在于一開始進入第一個 li 的時候，線條只能是從右往左，除此之外，都能很好的實現(xiàn)跟隨效果。
好了，本文到此結(jié)束，希望對你有幫助
回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~
點擊“閱讀原文”查看 100+ 篇原創(chuàng)文章