在之前，我介绍过几种使用纯 CSS 实现波浪效果的方式，关于它们有两篇相关的文章：

本文将会再介绍另外一种使用 CSS 实现的波浪效果，思路非常有意思。

在进入主题之前，先看看这个，在高等数学中，我们可以通过定积分求二次函数曲边图形面积。

我们可以将曲线下的面积分割成 n 个的细高的矩形，当 n 无限趋近于无穷时，所有矩形的面积就等于曲边图形的面积。

两张简单的示意图，图取自为什么定积分可以求面积？：

当 n 无限趋近于无穷时，所有矩形的面积就等于曲边图形的面积：

利用这个思路，我们也可以通过多个 div 在 CSS 中模拟出一条曲边，也就是波浪线。

首先，我们可以定义一个父容器，父容器下有 12 个子 div：

通过 flex 布局，简单布局一下，得到这样一个图形，每个子元素等高：

效果如下：

接下来，简单改造下，我们需要让这个图动起来，通过改变每个子元素的高度实现：

效果如下：

接下来，只需要，让每个子元素的动画顺序设定一个不同时间的负延迟即可，就可以得到一个初步的波浪效果，这里为了减少工作量，我们借助 SASS 实现：

这样，我们就得到了一个初步的波浪效果：

可以看到，上述的波浪动画是存在一定的锯齿的，接下来我们要做的就是尽可能的消除掉这些锯齿。

按照一开始使用定积分求曲边图形面积的思想，我们只需要尽可能增加子 div 的数量即可，当 div 的数量无穷多的时候，锯齿也就会消失不见。

我们可以尝试将上述的 12 个子 div，替换成 120 个试下，一个一个写 120 个 div 太费力了，我们这里借助 Pug 模板引擎：