之前至少有5人在评论中问我文章中链接悬停时的波浪动画是如何实现的，如右图gif所示：
以下是如何实现它。
有两种实现方式，各有利弊。
1.使用径向渐变纯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);
}
实时效果如下：
有了静态波浪线的效果，剩下的就和移动波浪线一样了css3波浪线边框，只需使用CSS3动画动画来控制background-position位置即可。
.flow-wave {
animation: waveFlow 1s infinite linear;
}
@keyframes waveFlow {
from { background-position-x: -10px, 0; }
to { background-position-x: -30px, -20px; }
}
这样就实现了波浪线动画的疗效。
这种方法的优点是颜色控制非常方便。 例如，我们将文字的颜色改为宽恕绿，弯曲的水波的颜色也改为宽恕绿：
这种方法的缺点是：理解成本有点高。 如何使用CSSradial-gradient来模拟波浪线的效果，需要相当的CSS技巧积累。 同时，在正常屏幕密度屏幕下的Chrome浏览器上，线条并不流畅，这可能无法被挑剔的设计师所接受。
此时，你可以尝试以下更有利于理解的方法。
2.使用SVG波形矢量图形作为背景
也就是我们直接使用一张SVG波形矢量图作为背景，而不是自己自动绘制CSS，代码量差不多，也更容易理解。 CSS 代码显示：
.svg-wave {
background: url("data:image/svg+xml,%3Csvg xmlns='%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;
}
实时效果如下：
有了静态波浪线的效果，剩下的就和移动波浪线一样了，只需使用CSS3动画动画来控制background-position位置即可。
.svg-wave {
animation: waveMove 1s infinite linear;
}
@keyframes waveMove {
from { background-position: 0 100%; }
to { background-position: -20px 100%; }
}
这个方法是我的博客链接所使用的技术。
优点是腰线边缘光滑、效果饱满、易懂、好用、易维护。
缺点也很明显，那就是波浪线的颜色无法跟随文字颜色实时变化，适合文字颜色不变化的场景。
如果我们想改变波浪线的颜色也很简单，修改后台代码中的strike='%23333'部分，'%23'是#，因此，strike='%23333'实际上是strike=' #333'的含义。 例如，如果我们需要将其改为黑色和黑色，我们可以编写笔划='%23F30'，也可以编写完整的笔划='%23FF3300'。
这个颜色就是我博客链接的波浪线的颜色，如下图：
您可以根据自己的实际开发场景选择合适的方法。
3.每当比赛即将结束时
text-decoration 属性已经支持波浪号和逗号：
text-decoration-style: wavy;
效果截图如下：
可以看到线条如此粗且不协调，而且当字符与装饰线重叠时，装饰线直接消失css3波浪线边框，波浪线被切成碎片，需要使用text-decoration-skip进行附加控制。 因此，不建议在实际项目中用于实际开发。
而且你无法预测每个波浪重复段的长度，因此理论上不可能想要无限的运动。
因此，文字装饰波浪线不能用于文字或图形的波浪动画效果。
我是一名前端工程师两年了，希望这篇文章对你有帮助！
这里推荐我的后端学习交流按钮qun：731771211，都是学习后端的。 如果你想制作酷炫的网页，学习编程。我整理了一份2019年最全的后端学习资料，从最基本的HTML+CSS+JS【炫酷特效、游戏、插件打包、设计模式]到移动HTML5项目的实际学习资料。 致每一位后端伙伴，每天分享技术
