css实现圆球旋像水波波动_纯CSS实现动态波浪效果

在预备做这个动效之前，参考了网上的教程，结果当然是需要借助贝塞尔曲线。

本人却偏好css，因为纯css实现贝赛尔曲线是极难的。(当然也可以使用借助canvas技术来轻松实现这一效果，不过，练的就是css！)

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

纯手工 CSS 实现波浪效果

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

原理

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

circle.png

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

circle2.png

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

0.gif

接下来请仔细看这个旋转起来的图案的边角，仔细盯着一边看，是不收会有类似波浪的起伏效果的赶脚。。。um好像悟出了点什么👆！

没错！就是要借助这个动态旋转变换的起伏动画，模拟出类似波浪纹的效果。

利用上面原理可以做