纯CSS实现动态波浪效果

在预备做这个动效之前，参考了网上的教程，结果当然是需要借助贝塞尔曲线。 本人却偏好css，因为纯css实现贝赛尔曲线是极难的。（当然也可以使用借助canvas技术来轻松实现这一效果，不过，练的就是css！）

简单提一下，使用使用 canvas 实现波浪纹效果的原理：就是利用路径绘制出三次贝塞尔曲线并赋予动画效果。

上面虽然提到没有办法直接使用css绘制出三次贝塞尔曲线，但是我们可以利用一些讨巧的方法，模拟波浪运动时的效果。

原理十分简单，我们都知道，一个正方形，给它添加 border-radius: 50%，将会得到一个圆形。

但如果 border-radius 没达到大于等于50%，但是接近 50%时 ，我们会得到一个这样的图形：

注意这个非圆非椭圆型的图形的边角，再让上面这个图形滚动起来(rotate) ，看看效果：

接下来请仔细看这个旋转起来的图案的边角，仔细盯着一边看，是不收会有类似波浪的起伏效果的赶脚。。。um好像悟出了点什么👆！ 没错！就是要借助这个动态旋转变换的起伏动画，模拟出类似波浪纹的效果。

利用上面原理可以做到的一种波浪运动背景效果图：

后面漂浮的波浪效果，其实就是利用了上面的 border-radius: 45% 的椭圆形，只是放大了很多倍，视野之外的图形都 overflow: hidden ，只留下了一条边的视野，并且增加了一些相应的 transform 变换。

SCSS代码如下：

接下来我们把上面的效果缩小 10 倍，将视野之外的动画也补齐，那么其实生成波浪的原理是这样的：

图中的虚线框就是我们实际的视野范围。 这里我们生成波浪，并不是利用旋转的椭圆本身，而是利用它去切割背景，产生波浪的效果。 那为什么不直接使用旋转的椭圆本身模拟波浪效果呢？ 这样更符合我们想要的波浪高低起伏效果，而不是上面这种简单的中间低两边高的效果，好，就根据这个需求思路，继续修改：

HTML 如下：

CSS 代码如下：

是不是很简单😄。虽然目前效果还未完全达到我们希望的，不过继续优化，不仅有利于巩固css动画技巧，而且学习成本可比canvas和svg实现要小得多呢！ 查看demo效果

单纯的让一个 border-radius 接近 50 的椭圆形旋转，动画效果可能不是那么好，我们可以适当的添加一些其他变换因素，让动画效果看上去更真实：

最终demo效果