说到下划线,相信大家都不陌生。
下划线(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 知识,所以说,任何一门技术,研究到极致都是一门学问……