難以想象的CSS導航欄下劃線跟隨效果

轉載： 國服第一切圖仔 github.com/chokcoco

先上張圖，如何使用純 CSS 製做以下效果？

在繼續閱讀下文以前，你能夠先緩一緩。嘗試思考一下上面的效果或者動手嘗試一下，不借助 JS ，可否巧妙的實現上述效果。

OK，繼續。這個效果是我在業務開發的過程當中遇到的一個相似的小問題。其實即使讓我藉助 Javascript ，個人第一反應也是，感受很麻煩啊。因此我一直在想，有沒有可能只使用 CSS 完成這個效果呢？

定義需求

咱們定義一下簡單的規則，要求以下：

• 假設 HTML 結構以下：

<ul>
  <li>難以想象的CSS</li>
  <li>導航欄</li>
  <li>光標小下劃線跟隨</li>
  <li>PURE CSS</li>
  <li>Nav Underline</li>
</ul>
複製代碼

• 導航欄目的 li 的寬度是不固定的
• 當從導航的左側 li 移向右側 li，下劃線從左往右移動。同理，當從導航的右側 li 移向左側 li，下劃線從右往左移動。

實現需求

第一眼看到這個效果，感受這個跟隨動畫，僅靠 CSS 是不可能完成的。

若是想只用 CSS 實現，只能另闢蹊徑，使用一些討巧的方法。

好，下面就藉助一些奇技淫巧，使用 CSS 一步一步完成這個效果。分析一下難點：

寬度不固定

第一個難點， li 的寬度是不固定的。因此，咱們可能須要從 li 自己的寬度上作文章。

既然每一個 li 的寬度不必定，那麼它對應的下劃線的長度，確定是是要和他自己相適應的。天然而然，咱們就會想到使用它的 border-bottom 。

li {
    border-bottom: 2pxsolid#000;
}
複製代碼

那麼，可能如今是這樣子的（li 之間是相連在一塊兒的，li 間的間隙使用 padding 產生）：

默認隱藏，動畫效果

固然，這裏一開始都是沒有下劃線的，因此咱們可能須要把他們給隱藏起來。

li {
    border-bottom: 0pxsolid#000;
}
複製代碼

推翻重來，藉助僞元素

這樣好像不行，由於隱藏以後，hover li 的時候，須要下劃線動畫，而 li 自己確定是不能移動的。因此，咱們考慮藉助僞元素。將下劃線做用到每一個 li 的僞元素之上。

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

下面考慮第一步的動畫，hover 的時候，下劃線要從一側運動展開。因此，咱們利用絕對定位，將 li 的僞元素的寬度設置爲0，在 hover 的時候，寬度從 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，感受離成功近了一步。如今還剩下一個最難的問題：

如何讓線條跟隨光標的移動動做，實現當從導航的左側 li 移向右側 li，下劃線從左往右移動。同理，當從導航的右側 li 移向左側 li，下劃線從右往左移動。

咱們仔細看看，如今的效果：

當從第一個 li 切換到第二個 li 的時候，第一個 li 下劃線收回的方向不正確。因此，能夠能咱們須要將下劃線的初始位置位移一下，設置爲 left: 100%，這樣每次下劃線收回的時候，第一個 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%;
}
複製代碼

看看效果：

額，仔細對比兩張圖，第二種效果實際上是撿了芝麻丟了西瓜。第一個 li 的方向是正確了，可是第二個 li 下劃線的移動方向又錯誤了。

神奇的 ~ 選擇符

因此，咱們迫切須要一種方法，可以不改變當前 hover 的 li 的下劃線移動方式卻能改變它下一個 li 的下劃線的移動方式（好繞口）。

沒錯了，這裏咱們能夠藉助~選擇符，完成這個艱難的使命，也是這個例子中，最最重要的一環。

對於當前 hover 的 li ，其對應僞元素的下劃線的定位是 left: 100%，而對於 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;
}
複製代碼

至此，咱們想要的效果就實現拉！撒花。看看：

效果不錯，就是有點僵硬，咱們能夠 適當改變緩動函數 以及加上一個 動畫延遲 ，就能夠實現上述開頭裏的那個效果了。固然，這些都是錦上添花的點綴。

完整的DEMO能夠戳這裏: CodePen --Demo

最後

本方法 最大的瑕疵 在於一開始進入第一個 li 的時候，線條只能是從右往左，除此以外，都能很好的實現跟隨效果。

許久沒更新了，最近沉迷學習區塊鏈相關技術，譬如以太坊編程，智能合約的編寫巴拉巴拉的。後面仍是會把更多精力放在本行，多出一些前端文章，CSS 的魅力仍是沒法抵擋的。

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

好了，本文到此結束，但願對你有幫助 :)

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。