在预备做这个动效之前，参考了网上的教程，结果当然是需要借助贝塞尔曲线。
本人却偏好css，因为纯css实现贝赛尔曲线是极难的。(当然也可以使用借助canvas技术来轻松实现这一效果，不过，练的就是css！)
简单提一下，使用使用 canvas 实现波浪纹效果的原理：就是利用路径绘制出三次贝塞尔曲线并赋予动画效果。
纯手工 CSS 实现波浪效果
上面虽然提到没有办法直接使用css绘制出三次贝塞尔曲线，但是我们可以利用一些讨巧的方法，模拟波浪运动时的效果。
原理
原理十分简单，我们都知道，一个正方形，给它添加 border-radius: 50%，将会得到一个圆形。
circle.png
但如果 border-radius 没达到大于等于50%，但是接近 50%时 ，我们会得到一个这样的图形：
circle2.png
注意这个非圆非椭圆型的图形的边角，再让上面这个图形滚动起来(rotate) ，看看效果：
0.gif
接下来请仔细看这个旋转起来的图案的边角，仔细盯着一边看，是不收会有类似波浪的起伏效果的赶脚。。。um好像悟出了点什么????！
没错！就是要借助这个动态旋转变换的起伏动画，模拟出类似波浪纹的效果。
利用上面原理可以做
