说到下划线，相信大家都不陌生。
下划线（underscore）是一种特殊符号，通常用于强调、标记或表示缺失的文字。它是一条水平线，位于文本的底部，与字母和数字等字符平齐。下划线在不同的领域和场景中有不同的用途，如书写、编程、表格制作等。
在书写和排版中，下划线通常用于强调特定的文字或标题。它可以用于单词、短语或整个句子，以突出显示重要信息。
在计算机编程中，下划线通常用于变量、函数和文件名的命名。根据编程语言的约定，下划线可以用作标识符的一部分，以提高可读性和代码的可维护性。
相信，下划线与动画相结合的特效，您一定也不陌生。那么，您见过这样的下划线特效吗？
这样的下划线动画有三个特点：
- 下划线的高度可以控制的，并且下划线的颜色是渐变的颜色；
- 默认没有下划线，而是等鼠标经过的时候，下划线从左侧进入；
- 当鼠标离开的时候，下划线从右侧离开。
而且，咱们的这个下划线效果，在多行情况下也成立噢！
摩拳擦掌，咱们立刻开始写一个出来吧！
一、渐变下划线
我们直接在 HTML 中用一个 H1 标签写入文字。
<h1>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。</h1>然后，我们给 H1 标签一个渐变的背景色。
h1 {
background: linear-gradient(to right, #ec695c, #61c545);
}得到一行文本具有一个渐变的背景色效果。
好奇宝宝要问了，说好的下划线呢？搞背景干嘛？
聪明的您一定猜到了，我们可以通过控制背景的高度和位置，让其变成下划线效果。
h1 {
background-image: linear-gradient(to right, #ec695c, #61c545);
background-repeat: no-repeat;
background-position-y: bottom;
background-size: 0 2px;
}我们设置背景的水平位置为 right，竖直位置为 bottom，并设置背景的宽度为 auto，高度为 2px。
因为背景的高度仅为 2px，那么需要设置背景重复为 no-repeat 让其不重复，不然还是会重复的填充了整个 H1 标签的范围。
这样，我们就把一个渐变色的下划线给写出来了。
二、鼠标悬停效果
我们需要鼠标进入文字区域的时候才显示下划线，并且效果是让下划线从左侧开始变长，所以我们先让背景的宽度为 0。
h1 {
background-image: linear-gradient(to right, #ec695c, #61c545);
background-repeat: no-repeat;
background-position-y: bottom;
background-size: 0 2px;
}这个时候是不会显示下划线的，因为背景的宽度为 0。
于是，我们设置鼠标悬停的时候，显示下划线。
h1:hover {
background-size: 100% 2px;
} 
现在鼠标悬停的下划线效果是出现了，但是我们想要的是缓慢出现的动画效果。于是我们给元素添加一个过渡属性。
h1 {
background-image: linear-gradient(to right, #ec695c, #61c545);
background-repeat: no-repeat;
background-position-y: bottom;
background-size: 0 2px;
transition: background-size 1.5s;
}我们通过 transition 属性控制背景大小的过渡时长为 1.5s。
这样，我们就实现了渐变下划线的鼠标悬停效果。
三、控制下划线进与出的方向
鼠标进入的时候，下划线从左侧进入了，但是鼠标离开的时候，我们希望下划线是从右侧出去。需要实现这样的效果，我们需要对 CSS 中的 hover 伪类做一个深入的剖析。
我们知道，hover 是 CSS 中的一个伪类，其效果是对所选元素的鼠标悬停时候的样式控制。
相信学习过 JavaScript 的宝子们都会有一个疑惑，CSS 中有 hover，JavaScript 中却没有 hover 事件，而是需要使用 mouseenter 或者 mouseover 事件记录鼠标进入，然后再使用 mouseleave 或者 mouseout 事件记录鼠标离开。难道，hover 包含了鼠标进入和鼠标离开两个事件机制？
带着这样的疑惑，我们大胆的使用背景大小做了一个实验。
h1 {
background-image: linear-gradient(to right, #ec695c, #61c545);
background-repeat: no-repeat;
background-position-y: bottom;
background-size: 50% 2px;
transition: background-size 1.5s;
}
h1:hover {
background-size: 100% 2px;
}得到如下结果：
通过效果，我们可以发现如下规律：
当鼠标进入的时候，元素表现出来的样式，会从原本的属性值过渡到 hover 伪类中的属性值；
当鼠标离开的时候，元素表现出来的样式，会从 hover 伪类中的属性值过渡到原本的属性值。
有了这个结论，我们就可以调整一下思路。在 h1:hover 中设置背景的位置为 left，让鼠标进入的时候，背景就是从左边开始慢慢变宽。在 h1 中设置背景的位置为 right，这样一来，鼠标离开的时候，背景就从右边开始慢慢变窄。
h1 {
background-image: linear-gradient(to right, #ec695c, #61c545);
background-repeat: no-repeat;
background-position-x: right;
background-position-y: bottom;
background-size: 0 2px;
transition: background-size 1.5s;
}
h1:hover {
background-position-x: left;
background-size: 100% 2px;
}得到如下效果：
可以看到，我们已经成功了。
四、多行与文字
这个特效，基本上已经成功了，但是我们也看到文字之外，下划线还多了长长的一条尾巴。而且，当文字是多行的时候，这个问题就凸显的非常明显了。
其实，这是因为 H1 标签是块级元素（又叫块盒），默认情况下宽度是 100%，我们需要让其变成行内元素（又叫行盒）。
h1 {
display: inline;
background-image: linear-gradient(to right, #ec695c, #61c545);
background-repeat: no-repeat;
background-position-x: right;
background-position-y: bottom;
background-size: 0 2px;
line-height: 2;
transition: background-size 1.5s;
}
h1:hover {
background-position-x: left;
background-size: 100% 2px;
}设置行高 line-height 的值为 2，让其显示好看一些。
这样，我们就完成了文字来回渐变下划线的效果。
完整源码
今天源代码比较少，还是那四个字，拿走不谢！O(∩_∩)O
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字来回渐变下划线特效</title>
<style>
h1 {
display: inline;
background-image: linear-gradient(to right, #ec695c, #61c545);
background-repeat: no-repeat;
background-position-x: right;
background-position-y: bottom;
background-size: 0 2px;
line-height: 2;
transition: background-size 1.5s;
}
h1:hover {
background-position-x: left;
background-size: 100% 2px;
}
</style>
</head>
<body>
<h1>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。前世，储蓄梦想；今生，演绎铿锵。</h1>
</body>
</html>↓
↓
↓
有没有发现？如此简单的一个效果，竟然蕴涵了如此丰富的 CSS 知识，所以说，任何一门技术，研究到极致都是一门学问……
关注我，为你带来更多精彩内容！
1063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
