文字到底能玩出多少花样(三)使用background实现花式下划线

前言

该文作为《文字效果到底能玩出多少花样》的第三篇文章，带大家学习 background实现各种下划线效果 。

基础知识

按照惯例，首先进行基础知识的学习。

1. background-size: 指定背景图像的大小

• length: 设置背景图片的高度和宽度，第一个值为高度，第二个值为宽度
• percentage: 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。
• cover: 保持图片的宽高比并将图像缩放成将完全覆盖背景定位区域的最小大小
• contain: 此时会保持图像的宽高比并将图像缩放成将适合背景定位区域的最大大小。

background实现下划线

文字的下划线其实并不难实现，css3 提供的 text-decoration 属性就可以轻易实现，但这里咱们使用 background 来实现一下。

设置背景颜色 background 为渐变颜色，之后通过上面学习 background-size 将高度设置为 3px 就可以实现下划线效果。

span {
    background: linear-gradient(90deg, #0cc, #0cc);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    color: #0cc;
}
复制代码

下滑虚线实现

用 background 实现下划线功能怎么都感觉有几分大材小用，那咱们需求升级一下，生成下滑虚线效果。

下划虚线与下划线的区别只在于虚线部分，因此 background-size 无需修改，那该如何实现那？

很简单，只需要设置背景为一半透明，一半蓝色，使用 background-repeat 就能实现。下面直接来看代码

background: linear-gradient(90deg, #0cc 50%, transparent 50%, transparent 1px);
background-size: 10px 2px;
background-repeat: repeat-x;
复制代码

实现hover时出现的渐变下划线

感觉上面的还是很简单，继续难度加大，当 hover 时，文字底部出现渐变的下划线(封面效果三)。

咱们来分析一下需求:

• 渐变下划线: 实现起来比较简单，background: linear-gradient 使用渐变色即可
• 渐渐出现: 动画效果，使用 transition 实现
• hover 时显示: hover 伪类
• 下划线从 0 到全部显示: 下划线是通过 background 实现的，并且可以通过配置 background-position 设置其显示大小，那么我们可以初始化时设置为不显示 ，hover 时设置为 100% 就可以实现。

a{
    background-size: 0 3px;
    background-position: 0 100%;
    transition: 1s all;
}
a:hover {
    background-size: 100% 3px;
    color: #000;
}
复制代码

源码仓库