下划线动画

刀刀

11/5/2024

0 字

0 分钟

基础效果

在一个网站上看到一个效果：鼠标移动到标题上有一个下划线显示的动画，从左往右。鼠标移出后从左往右隐藏。如果是多行文本他也会按顺序从第一行开始到最后一行结束。

想要实现这个效果，先来思索在 CSS 中，有什么东西是可以跟随行内式盒子移动的。第一时间想到的就是背景 background 。

不过想要实现下划线效果，使用背景色是肯定不行了，因为背景色无法设置宽高。而渐变背景可以，因为渐变背景本质是背景图 background-image ，而背景图可以通过 background-size 设置背景大小。然后再通过 background-position 定位到文字下方。

示例代码如下：

div {
  background: linear-gradient(to right, #7e2f2b, #146429) no-repeat;
  background-size: 100% 2px;
}

动画过渡

现在给下划线添加动画效果，动画的本质就是控制 background-size ，不显示设置0，显示设置 100%，

代码修改后如下：

div {
  background: linear-gradient(to right, #7e2f2b, #146429) no-repeat left bottom;
  background-size: 0 2px;
  transition: background-size .5s;
}

div:hover {
  background-size: 100% 2px;
}

细节优化

现在能够实现鼠标移入下划线动画显示，移出动画隐藏，但是还需要优化一点细节问题。

现在动画显示是从左到右显示没错，但是隐藏是从右到左，不是需求的左到右，需要调整。

在设置 background-position 时一开始给它设置的是 left bottom ，所以是从左往右显示，从左往右隐藏。如果修改为 right bottom ，就变成了从右往左显示，从右往左隐藏。

综上所述，在 hover 时 background-position 设置为 left bottom ，正常状态下设置为 right bottom 即可。

代码如下：

div {
  background: linear-gradient(to right, #7e2f2b, #146429) no-repeat right bottom;
  background-size: 0 2px;
  transition: background-size .5s;
}

div:hover {
  background-size: 100% 2px;
  background-position: left bottom;
}

总体效果