CSS实现文字下面波浪线动画效果

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8607

本文可全文转载，个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。

之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的，类似下图gif示意：

这里就介绍下是如何实现的。

有两种实现方法，各有优劣。

一、使用径向渐变纯CSS实现

就是使用径向渐变绘制我们的波浪线效果，一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的。

所以，我们只要使用径向渐变绘制圆弧，再通过 background-position 控制两个圆弧的位置，让其前后拼接在一起就可以实现波浪线效果。

相关CSS代码如下：

.flow-wave {
    background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
        radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
    background-size: 20px 20px;
    background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
}

实时效果如下 若无效果请访问原页面地址：https://www.zhangxinxu.com/wordpress/?p=8607 ：

有了静态的波浪线效果，剩下的就像这个波浪线动起来，用CSS3 animation 动画控制 background-position 位置即可。

.flow-wave {
    animation: waveFlow 1s infinite linear;
}
@keyframes waveFlow {
    from { background-position-x: -10px, 0; }
    to { background-position-x: -30px, -20px; }
}

于是波浪线动画效果就实现了。

您可以狠狠地点击这里： CSS径向渐变模拟波浪线demo

这种方法实现的优点是颜色控制非常方便，例如，我们修改文字颜色为原谅绿，弯弯水波的颜色也变成了原谅绿：

此方法实现的不足就是：理解成本有点高，如何使用CSS radial-gradient 模拟波浪线效果是需要相当的CSS功力积累的，上手不太容易，以后要修改个尺寸什么的也不太好维护。同时，在普通屏幕密度屏幕下的Chrome浏览器上，线条并不平滑，吹毛求疵的设计师不一定会接受。

此时，可以试试下面这种更利于理解的方法。

二、使用SVG波形矢量图作为背景

就是我们直接使用一个使用SVG波形矢量图作为背景，不用自己去手动CSS绘制，代码量差不多，还更容易理解。CSS代码示意：

.svg-wave {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23333' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%; 
    background-size: 20px auto;
}

实时效果如下 若无效果请访问原页面地址：https://www.zhangxinxu.com/wordpress/?p=8607 ：

有了静态的波浪线效果，剩下的就像这个波浪线动起来，用CSS3 animation 动画控制 background-position 位置即可。

.svg-wave {
    animation: waveMove 1s infinite linear;
}
@keyframes waveMove {
    from { background-position: 0 100%; }
    to   { background-position: -20px 100%; }
}

此方法就是我博客链接使用的方法。

优点是线条边缘平滑，效果细腻，易理解，易上手，易维护。

缺点也很明显，就是波浪线的颜色无法实时跟着文字的颜色发生变化，适用于文字颜色不会多变的场景。

如果我们想要改变波浪线的颜色也很简单，修改 background 代码中的 stroke='%23333' 这部分， '%23' 就是就是 # ，因此， stroke='%23333' 其实就是 stroke='#333' 的意思。例如，我们需要改成红色略带橙色，可以 stroke='%23F30' ，也可以写完整 stroke='%23FF3300' 。

这个颜色就是我博客链接波浪线的颜色，如下图：

大家可以根据自己实际开发的场景选择合适的方法。

三、每当要结束的时候

text-decoration 属性早已支持波浪线下划线：

text-decoration-style: wavy;

效果如下截图：

可以看到，线好粗好不协调，而且字符和装饰线发生重叠的时候，装饰线直接消失了，结果波浪线变成了一截一截的，还需要使用 text-decoration-skip 进行额外控制。因此，实际开发，不建议在实际项目中使用。

而且你无法预知每个波浪线重复片段的宽度，想要无限运动理论上就不太可行。

因此，文字或者图形的波浪线动画效果不能使用 text-decoration 的波浪线。

PS：text-decoration新增不止波浪线，还有虚线点线等，有兴趣可以参阅我之前写的“ 了解CSS3 text-decoration波浪线等新特性 ”这篇文章。

最后，写一首诗吧：

每当要结束的时候，

我总想再扯点什么。

追问癖好源自哪里？

远方那里有个孤岛。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。

本文地址： https://www.zhangxinxu.com/wordpress/?p=8607

（本篇完）