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

这篇文章主要介绍“CSS实现文字下波浪线动画效果”，在日常操作中，相信很多人在CSS实现文字下波浪线动画效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS实现文字下波浪线动画效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

一、使用径向渐变纯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 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 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;
}

实时效果如下：

有了静态的波浪线效果，剩下的就像这个波浪线动起来，用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的波浪线。

到此，关于“CSS实现文字下波浪线动画效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！