web前端入门到实战：CSS文字下波浪线动画效果_前端波浪线渐变效果-优快云博客

本文介绍了两种纯CSS实现文字下波浪线动画的方法：一是利用径向渐变绘制，二是设置SVG波形矢量图背景。分别阐述了它们的优缺点，如颜色控制、理解难度和维护性，并提供了示例代码。适合前端开发者参考。

之前有至少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);
}
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
</