分析与实现

我们再看一下效果图，下划线子辰使用的是一个渐变的下划线，这就是在提醒你，其实效果是用渐变背景来实现的。

是不是完全想不到？

我们先看一下基本的结构。

<h2 class="title">
  <span>十年后，你会发现CSS才是你永远也学不会的语言</span>
</h2>

然后我们给 span 元素添加一个线性渐变背景。

.title span {
  background: linear-gradient(to right, #ec695c, #61c454);
}

你会发现行盒的背景是可以跟随文字换行的。

我们再来改变一下背景图的大小。

.title span {
  background: linear-gradient(to right, #ec695c, #61c454);
  background-size: 100px;
}

背景图重复了，我们将背景图设置 no-repeat 让背景图不重复。

.title span {
  background: linear-gradient(to right, #ec695c, #61c454) no-repeat;
  background-size: 100px;
}

我们现在再次调整背景图的大小，让它宽度占满，高度变小。

.title span {
  background: linear-gradient(to right, #ec695c, #61c454) no-repeat;
  background-size: 100% 2px;
}

现在呢，背景图变成了一条线了，只不过位置是在上边，我们改变背景图的位置，让它靠左靠下。

.title span {
  background: linear-gradient(to right, #ec695c, #61c454) no-repeat left bottom;
  background-size: 100% 2px;
}

静态的效果已经实现了。

我们需要的是，鼠标移入的时候背景从左边出来，也就是说最开始背景的宽度是 0，鼠标移入后宽度逐渐变成 100%，我们给这个变化过程加一个过渡时间。

.title span {
  background: linear-gradient(to right, #ec695c, #61c454) no-repeat left bottom;
  background-size: 0 2px;
  transition: background-size 1000ms;
}
.title span:hover {
  background-size: 100% 2px;
}

我们会发现进去的时候是从左边出来的，但是退出的时候应该是从右边退出才对。

那你思考一下，影响背景位置的是什么？不就是设置的位置吗。

我们看之前设置的位置 left bottom 靠左靠下。

所以说背景图进出都是靠左的，我们要的是出来的时候靠左，退出的时候靠右。

那我们直接给 span 设置 right 靠右行不行？显然是不行的，那样进出都靠右了。

我们再思考一下，他是何时出现，何时退出的？

很明显是 hover 的时候出现，鼠标离开的时候退出，那么就是说，hover 的时候应该靠左，离开的时候靠右，那离开的时候也就是自己 span 的初始值。

我们来试一下。

.title span {
  background: linear-gradient(to right, #ec695c, #61c454) no-repeat right bottom;
  background-size: 0 2px;
  transition: background-size 1000ms;
}
.title span:hover {
  background-position-x: left;
  background-size: 100% 2px;
}

好了，这样我们的效果就实现了。

总结

子辰通过实现一个案例来介绍了 CSS 的渐变背景、背景大小调整、位置设置、鼠标 hover 过渡等基本属性和技巧。

通过动手实践，你能够对这些属性和技巧有更加深刻的理解，提升了自己对 CSS 的掌握和运用能力。

其实子辰想揭示的是一个重要的思考方式，即需通过实际操作和想象力来寻找问题的解决方案。

这种思考方式不仅在 CSS 样式的应用上具有指导意义，更可以促进你在其他领域的创造性思维和创新能力的提高。

本文来源

本文来源自渡一公众号:Duing，欢迎关注，获取超新、超深入的技术讲解

感谢你阅读本文，如果你有任何疑问或建议，请在评论区留言，如果你觉得这篇文章有用，请点赞收藏或分享给你的朋友！

让你的标题动起来：一个CSS渐变下划线效果的实用技巧

分析与实现

总结

本文来源