CSS实现动画环绕下划线效果

下划线对大家来说并不陌生，在一些重要的事项或者需要我们着重强调的地方经常会用到下划线来作为提示，那么，下划线的实现方式难吗？ 说到这儿可能很多小伙伴就会飘来不屑的眼光，这有何难，三下五除二就可以实现，的确，这我相信大家实力，但是大家有没有想过如何通过CSS相关属性为你的下划线添加更加华丽的动画效果呢。

目标

在链接下方的彩色下划线，具有悬停效果，其中该行后退并被另一条不同颜色的线替换。在这个动画中，线条不应该接触，在它们之间留出一些空间。

换行的链接应该在所有行下都有下划线。

使用背景方法

有许多不同的方法来给一段文字加下划线。我最终使用的满足所有要求的方法是：使用 CSS 属性background-image。

通过将背景图像定义为从一种颜色过渡到同一种颜色的线性渐变，背景图像可以是纯色。

如果我打算使用纯色，为什么要使用background-image属性而不是background-color属性呢？

因为许多操纵背景的属性只有在使用背景图像时才起作用。

背景的大小在高度上受到限制，并通过将背景大小分别设置为2px和100%来占用锚元素的整个宽度。

这最后还是覆盖了整个背景，因为现在它反复重复，直到覆盖了整个背景。所以我把background-repeat设置为no-repeat，以此来阻止它重复导致北京被覆盖。

线在锚元素的顶部！在背景位置设置为0的情况下定位它100%将其放置在左边缘，并且100%位于锚元素的上边缘。

换句话说，在底部…现在在底部。

公共 HTML 代码如下：

<a href="#">mybjmybjmybjmybj</a>
<br /><br />
<div><a href="#">on multiple lines.</a></div>

公共 CSS 代码如下：

body {
  background-color: #222b40;
  font-size: 3rem;
}
div {
  width: 200px;
}

最简单的下划线实现 CSS 代码：

a {
  color: #dfe5f3;
  text-decoration: none;
  background-image: linear-gradient(rgb(176, 251, 188), rgb(176, 251, 188));
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}

效果如下：

两个背景

要使用和操作多个背景图像，请为background-*属性设置多个值，用逗号分隔。

逗号分隔列表中的第一个条目位于顶部，后面的每个条目后面都有一个图层。

以下锚元素的背景将完全为黑色（#000000）。虽然白色（#ffffffff）背景在那里，但它不可见，因为它被黑色的覆盖了。

代码如下：

a {
  background-image: linear-gradient(#000000, #000000), linear-gradient(#ffffff, #ffffff);
}

在下面的例子中，我设置了两个背景。两个都在底部，使一个重叠另一个。

关键 CSS 代码如下：

a {
  color: #dfe5f3;
  text-decoration: none;
  background-image: linear-gradient(rgb(176, 251, 188), rgb(176, 251, 188)),
    linear-gradient(#feb2b2, #feb2b2);
  background-size: 100% 2px, 100% 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat, no-repeat;
}

效果如下：

转换 background-size

不知道大家有没有注意到使用background-position的不同，和它的区别。一个锚定在左侧，另一个锚定在右侧。

下一步，我将在一个背景通常占据全宽和悬停时没有宽度之间过渡，而第二个背景则相反。

锚定将影响每个背景移动的点。

关键 CSS 代码如下:

a {
  color: #dfe5f3;
  text-decoration: none;
  background-image: linear-gradient(rgb(176, 251, 188), rgb(176, 251, 188)),
    linear-gradient(#feb2b2, #feb2b2);
  background-size: 100% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 2s linear;
}
a:hover {
  background-size: 0 2px, 100% 2px;
}

GIF 效果图如下：

三个背景

这几乎满足了目标。唯一缺少的是两行之间的空隙。

可以通过移动与背景颜色相同的块来伪造该空间，即另一个背景。

什么比两个背景更好？三个背景！

三个背景。。啊啊啊啊🦇

我将把这个背景放在另外两个之上，首先在background-image的逗号分隔值中列出它。

“别忘了！

其他background-*属性的第一个值现在也指向这个新添加的background-image上。”

宽度和高度由背景大小设置。同时将高度设置为与其他背景相同的大小（本例中为 2px）。这一次，宽度被设置为相当小的 20px。

过渡 background-position

为了使背景色块在悬停的锚元素上之前不可见，背景将被赋予一个负background-position，使其位于元素的左侧，从而完全脱离屏幕。

在锚上悬停后，块应该移动到下划线的另一侧，直到它再次完全脱离屏幕。

calc()函数用于计算这两个位置。关于 calc()函数的用法可以看我之前写过的一篇文章《css3 calc()属性介绍以及自适应布局使用方法》《CSS calc()的完整指南》

关键 CSS 代码如下：

a {
  color: #dfe5f3;
  text-decoration: none;
  background-image: linear-gradient(#222b40, #222b40), linear-gradient(
      rgb(176, 251, 188),
      rgb(176, 251, 188)
    ), linear-gradient(#feb2b2, #feb2b2);
  background-size: 20px 2px, 100% 2px, 0 2px;
  background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 2s linear, background-position 2s linear;
}
a:hover {
  background-size: 20px 2px, 0 2px, 100% 2px;
  background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%;
}

GIF 效果如下：

结语

以上就是今天为大家带来的纯 CSS 实现动画环绕下划线效果，希望对大家具有一定的参考价值，文中有表达不清楚的地方请多多包涵，，也欢迎大家留言讨论。