web前端入门到实战：CSS文字下波浪线动画效果

之前有至少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ÿ