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 方法，那么真的，天空就是极限。