10 個用於創建令人驚嘆的動畫下劃線文本效果的 CSS 片段

默認的 CSS 下劃線效果很好。 誰能討厭它？

但總有改進的空間。 你可能認為下劃線不能做很多事情，但是如果你深入研究 CSS 動畫，你會意識到你真的可以做多少！

我整理了無數的 CSS 下劃線樣式，並挑選了我最喜歡的網絡上最好的自定義下劃線。 如果其中任何一個引起您的注意，請隨意跳入並嘗試弄亂源代碼。

1. 交替下劃線

如果您在這些鏈接之間移動光標，您會發現一些有趣的東西。 導航菜單中的下劃線效果實際上改變了鏈接之間的樣式。

不僅如此，它還在導航中動態移動，給人一種它是一個單一塊的錯覺。 很酷吧？

您可以通過將帶下劃線的塊添加到 HTML 元素中自己使用一些 CSS 來完成所有這些工作。 考慮到您需要的代碼非常少（大約 60 行 CSS），這非常簡單。

2.跨越多行

CSS 換行樣式很棘手，也不容易解決。 但是開發者 Will King 用一些獨創性打造了這支筆，創造了一種動態的下劃線效果，可以跨越多條線而沒有任何錯誤。

請注意，這確實依賴於一些 JavaScript 來保持線路完整。 但它也足夠動態，可以處理頁面上的任何鏈接，所以不管你如何格式化文本。

再加上這整件事使用自定義 CSS3 漸變作為背景，這非常酷。

3.滑動下劃線

開發人員 Ryan Morse 完全依賴 CSS 創建了這個非常簡單的滑動下劃線效果。 考慮到它甚至不需要額外的 HTML 項，這是一個非常優雅的解決方案。

您可以像任何其他網站一樣設計導航菜單，並使用此 CSS 效果創建動態滑動動畫。 此外，所有結果都可以在 CSS 代碼中更改，包括緩動和總持續時間。

4.更好的文字下劃線

乍一看，你可能不會注意到這條下劃線有什麼不同。 但是，如果您將它與頁面下方的“默認”演示進行比較，您會發現它確實看起來好多了。

在 Lukas Horak 更好的文本下劃線中，您會注意到文本下方的條更適合降序元素。 這考慮了像“g”和“p”這樣的字母形式，其中線條低於通常的線條高度。

此外，下劃線本身也被推到了文本下方，因此與瀏覽器默認設置相比，它呈現出新的外觀。

5.動畫風格

這支獨特的筆帶有一些由開發人員 Matthew Scott 使用純 CSS 創建的自定義下劃線效果。

它擁有四種基於一些常見 CSS 過渡的非常具體的下劃線樣式：

• 右到左
• 左到右
• 向外動畫
• 向內動畫

您會注意到這適用於常見的 CSS3 過渡，它們在懸停鏈接和將光標移出鏈接時都有效。

絕對是一些很酷的效果，它們都非常容易移植到您自己的項目中。

6.更多動畫風格

這是另一組自定義下劃線動畫，由 dev Kseso 創建。

這些更極端的下劃線樣式推動了 CSS3 陰影的發光效果。 如果您有時間（或者只是喜歡星球大戰），您可能可以使用它作為模板來製作 rad Star Wars 光劍設計。

7. 隨便進去

我在一些網站上看到過這種效果，它可能是我的最愛之一。 下拉下劃線使用純 CSS 並通過過渡效果將線條動畫化。

使用此動畫，您仍然可以感覺到每個下劃線“邊框”都連接到每個鏈接。 我喜歡它比鏈接之間滑動的線條更喜歡它，因為這種效果感覺更快捷、更直接。

如果您想要一種真正的極簡主義方法來強調效果，那麼您絕對應該嘗試使用此代碼。

8. 擴展動畫

擴展下劃線樣式可以在我之前提到的下劃線包中找到。 但是這個特定的下劃線有點不同，因為它使用自定義動畫時間。

請注意，它使用cubic-bezier()函數在懸停時創建獨特的動畫。

這比默認的“線性”過渡運行得快一點，所以它給出了完全不同的效果。 您甚至可以嘗試自己自定義貝塞爾動畫，以構建您自己的獨特下劃線樣式。

9. 自定義 CSS 下劃線

這是另一種真正可以在任何網站上使用的樣式。 開發人員 Tristan Wilson 創建了這些簡單的下劃線，將線條邊緣低於文本下方幾個像素。

它只是微妙到足以引起注意，但肯定不會對可用性產生巨大影響。 這種效果實際上是關於美學而不是額外的可用性。

如果您希望您的下劃線真正從所有人群中脫穎而出，那麼這組是一個很好的起點。

10. 下降器之間的擬合

之前我提到過自定義下劃線樣式以適應字體的下降。 Jonathan Neal 的這支筆就是這樣做的，它只使用 HTML5 和 CSS3。

整個效果取決於幾個 CSS3 屬性：準確地說是box-shadow和text-shadow 。

這會產生一種錯覺，即下降元素的一側有空間，並且給下劃線一種更優雅的感覺。

對於任何網站來說絕對是一個乾淨的選擇，它也是交替下劃線顏色的好方法。

11. 自定義漸變

如果您真的想突破極限，請嘗試使用其自定義下劃線漸變樣式重新設計這支筆。

漸變貫穿 CSS3，因此您可以將顏色更改為您想要的任何顏色。 如果你相信它，這個東西不需要額外的 HTML就可以工作。 只需定位您想要的任何錨鏈接並複制/粘貼 CSS 代碼即可獲得您自己的漸變下劃線。

在所有這些設計中，我當然希望你可以從這個系列中獲得一個很好的效果。

設計師並不總是考慮下劃線效果，但是你可以用排版做很多事情，如果你知道你的 CSS 方法，那麼真的，天空就是極限。