使用CSS怎么實現(xiàn)導航欄下劃線跟隨效果-創(chuàng)新互聯(lián)

使用CSS怎么實現(xiàn)導航欄下劃線跟隨效果？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

創(chuàng)新互聯(lián)公司專注于網站建設|網站維護公司|優(yōu)化|托管以及網絡推廣，積累了大量的網站設計與制作經驗，為許多企業(yè)提供了網站定制設計服務，案例作品覆蓋成都效果圖設計等行業(yè)。能根據企業(yè)所處的行業(yè)與銷售的產品，結合品牌形象的塑造，量身策劃品質網站。

假設 HTML 結構如下：

<ul>
  <li>不可思議的CSS</li>
  <li>導航欄</li>
  <li>光標小下劃線跟隨</li>
  <li>PURE CSS</li>
  <li>Nav Underline</li>
</ul>

• 導航欄目的li 的寬度是不固定的

• 當從導航的左側li 移向右側li ，下劃線從左往右移動。同理，當從導航的右側li 移向左側li ，下劃線從右往左移動。

實現(xiàn)需求

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

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

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

寬度不固定

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

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

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

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

默認隱藏，動畫效果

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

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

推翻重來，借助偽元素

這樣好像不行，因為隱藏之后，hoverli 的時候，需要下劃線動畫，而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，感覺離成功近了一步?，F(xiàn)在還剩下一個最難的問題：

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

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

當從第一個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 的下劃線的移動方式（好繞口）。

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

對于當前 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;
}

至此，我們想要的效果就實現(xiàn)拉！撒花。看看：

效果不錯，就是有點僵硬，我們可以適當改變緩動函數 以及加上一個動畫延遲 ，就可以實現(xiàn)上述開頭里的那個效果了。當然，這些都是錦上添花的點綴。

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

最后

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

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

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

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)網站建設公司，的支持。

分享名稱：使用CSS怎么實現(xiàn)導航欄下劃線跟隨效果-創(chuàng)新互聯(lián)
本文URL：http://www.jbt999.com/article46/eepeg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、Google、虛擬主機、動態(tài)網站、關鍵詞優(yōu)化、做網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)