利用CSS3伪元素与线性渐变打造网页版波浪线高亮效果

人亦已歌 · 发表于昨天 15:53

我们在读纸质书的时候，经常用笔划波浪线来突出重点内容，以强化视觉感受。

而在Web页面上，没有CSS3之前，我们只能用背景图片来实现类似功能，这当然不是个高效的方式，且难于维护和调整。

比如你只是想调整下颜色、线条大小和倾斜的角度，你都得打开作图软件来折腾一下。

现在我们可以使用CSS3伪元素及其背景渐变（gradient）来实现这一有趣而实用的效果。

我们观察下波浪线，有这么2个基本几何特征：

1. 波折线是重复的，可以被分解为若干相连的“角”形状

2. 这些“角”的连接点处是平滑过渡的，不能出现毛刺，所以需要对顶点处做平滑处理
对于（1），我们可以首先创建一个尖角形状（由一撇一捺2条短直线组成），然后使用x方向的repeat来重复。

对于（2），我们可以使用渐变色，模拟人手划线时，在转弯处力道减弱，我们在尖角相交处使用相对淡色，构造出圆角的视觉感受。

我们注意到每个“角”都有2条边，如果以默认渐变轴（从上往下的一条垂直线）来看，左边的呈现45°倾斜，而右边的呈现315°倾斜。

那么如何创建一个45°的倾斜线呢？我们很容易想到用rotate变换，但是rotate是作用于整个元素上的，在这里并不适用。

我们换个思路，CSS3中的线性渐变（linear-gradient）可以完成上述要求，线性渐变的核心是渐变轴、起点终点和颜色值分布。

通过设置渐变轴的角度为45°，我们可以得到倾斜的特性，然后我们再把渐变宽度缩窄到一个线条的大小，具体代码如下：

div {
background: linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%);
background-size: 20px 20px;
background-repeat: no-repeat;
}

复制代码

上面linear-gradient方法中的第一个参数是渐变轴角度，渐变将沿渐变轴开展，也就是渐变线的角度为45°。

后面的参数表示从0到45%的长度上为透明，45%到55%为红色渐变，55%到100%为透明。

也就是只有元素背景长度的10%出现渐变色（且是两边对称），第二行代码把背景的宽度设置为20px，那么渐变线的实际宽度为10px*10%=2px。

这样我们就得到了一根短折线，具备45°倾斜，且带渐变。

类似的，我们可以得到一根315°的渐变短折线：

div {
background: -webkit-linear-gradient(315deg, transparent, transparent 45%, red, transparent 55%, transparent 100%),-webkit-linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%);
background-size: 20px 20px;
background-repeat: no-repeat;
}

复制代码

但是现在我们得到的是2条交叉的线条，形成一个“X”形状，这并不是我们想要的。

一个简单的技巧就是设置元素的高度为1/2，就得到了一个“V”形。

然后，我们把background-repeat设置为repeat-x，就得到了波浪线形状。

我们还剩最后一步，我们需要把波浪线形状添加到文本下面，只要把上面的div元素改成对应文本的:before伪元素即可。

我们还可以设置不同的渐变颜色用以标注不同的文本。

在线演示

[[IT知识]] 利用CSS3伪元素与线性渐变打造网页版波浪线高亮效果