在预备做这个动效之前，参考了网上的教程，结果当然是需要借助贝塞尔曲线。
本人却偏好css，因为纯css实现贝赛尔曲线是极难的。（当然也可以使用借助canvas技术来轻松实现这一效果，不过，练的就是css！）
简单提一下，使用使用 canvas 实现波浪纹效果的原理：就是利用路径绘制出三次贝塞尔曲线并赋予动画效果。
纯手工 CSS 实现波浪效果
上面虽然提到没有办法直接使用css绘制出三次贝塞尔曲线，但是我们可以利用一些讨巧的方法，模拟波浪运动时的效果。
原理
原理十分简单，我们都知道，一个正方形，给它添加 border-radius: 50%，将会得到一个圆形。
但如果 border-radius 没达到大于等于50%，但是接近 50%时 ，我们会得到一个这样的图形：
注意这个非圆非椭圆型的图形的边角，再让上面这个图形滚动起来(rotate) ，看看效果：
接下来请仔细看这个旋转起来的图案的边角，仔细盯着一边看，是不收会有类似波浪的起伏效果的赶脚。。。um好像悟出了点什么👆！
没错！就是要借助这个动态旋转变换的起伏动画，模拟出类似波浪纹的效果。
利用上面原理可以做到的一种波浪运动背景效果图：
后面漂浮的波浪效果，其实就是利用了上面的 border-radius: 45% 的椭圆形，只是放大了很多倍，视野之外的图形都 overflow: hidden ，只留下了一条边的视野，并且增加了一些相应的 transform 变换。
注意，这里背景蓝色静止的，运动是白色的椭圆形。
SCSS代码如下：
body {
position: relative;
align-items: center;
min-height: 100vh;
background-color: rgb(118, 218, 255);
overflow: hidden;
&:before, &:after {
content: "";
position: absolute;
left: 50%;
min-width: 300vw;
min-height: 300vw;
background-color: #fff;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
&:before {
bottom: 15vh;
border-radius: 45%;
animation-duration: 10s;
}
&:after {
bottom: 12vh;
opacity: .5;
border-radius: 47%;
animation-duration: 10s;
}
}
@keyframes rotate {
0% {
transform: translate(-50%, 0) rotateZ(0deg);
}
50% {
transform: translate(-50%, -2%) rotateZ(180deg);
}
100% {
transform: translate(-50%, 0%) rotateZ(360deg);
}
}
接下来我们把上面的效果缩小 10 倍，将视野之外的动画也补齐，那么其实生成波浪的原理是这样的：
图中的虚线框就是我们实际的视野范围。
这里我们生成波浪，并不是利用旋转的椭圆本身，而是利用它去切割背景，产生波浪的效果。
那为什么不直接使用旋转的椭圆本身模拟波浪效果呢？
这样更符合我们想要的波浪高低起伏效果，而不是上面这种简单的中间低两边高的效果，好，就根据这个需求思路，继续修改：
使用纯 CSS 实现波浪进度图
HTML 如下：
<div class="container">
<div class="wave"/>
</div>
CSS 代码如下：
.container {
position: absolute;
width: 200px;
height: 200px;
padding: 5px;
border: 5px solid rgb(118, 218, 255);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
overflow: hidden;
}
.wave {
position: relative;
width: 200px;
height: 200px;
background-color: rgb(118, 218, 255);
border-radius: 50%;
&::before,
&::after{
content: "";
position: absolute;
width: 400px;
height: 400px;
top: 0;
left: 50%;
background-color: rgba(255, 255, 255, .4);
border-radius: 45%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 6s linear infinite;
z-index: 10;
}
&::after {
border-radius: 47%;
background-color: rgba(255, 255, 255, .9);
transform: translate(-50%, -70%) rotate(0);
animation: rotate 10s linear -5s infinite;
z-index: 20;
}
}
@keyframes rotate {
50% {
transform: translate(-50%, -73%) rotate(180deg);
} 100% {
transform: translate(-50%, -70%) rotate(360deg);
}
}
是不是很简单😄。虽然目前效果还未完全达到我们希望的，不过继续优化，不仅有利于巩固css动画技巧，而且学习成本可比canvas和svg实现要小得多呢！
查看demo效果
最后，一些小技巧
单纯的让一个 border-radius 接近 50 的椭圆形旋转，动画效果可能不是那么好，我们可以适当的添加一些其他变换因素，让动画效果看上去更真实：
- 在动画过程中，动态的改变 border-radius 的值；
- 在动画过程中，利用 transform 对旋转椭圆进行轻微的位移、变形；
- 多个椭圆同时转动，赋予不同时长的动画，并且添加轻微的透明度，让整个效果更佳逼真。
