HTML怎么在字体下方加波浪线,CSS实现文字下面波浪线动画效果

by zhangxinxu 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