发现了一个有意思的css样式，用css实现波浪进度图
原理
利用两个矩形重叠，设置它们的边框 border-radius ，父容器设置 overflow:hidden ， 然后再给它们加上旋转的动画效果就可以了，大概结构如下图所示，为了看清楚，用了不同的颜色显示；
结构图
html结构如下：
<div class="box">
<div class="rect">
<text>50%</text>
</div>
</div>
CSS代码如下：
.box {
width: 100vw;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
}
.rect {
width: 300px;
height: 300px;
border: 4px solid skyblue;
overflow: hidden;
background: skyblue;
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
font-weight: bold;
color: #aaa;
}
.rect text {
z-index: 2;
user-select: none;
}
.rect::before,
.rect::after {
content: '';
width: 600px;
height: 600px;
position: absolute;
bottom: 150px;
left: 50%;
margin-left: -300px;
}
.rect::before {
border-radius: 45%;
background: rgba(255, 255, 255, .4);
animation: rotate 6s linear infinite;
}
.rect::after {
border-radius: 47%;
background: rgba(255, 255, 255, .9);
animation: rotate 10s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0);
bottom: 150px;
}
50% {
transform: rotate(180deg);
bottom: 160px;
}
100% {
transform: rotate(360deg);
bottom: 150px;
}
}
通过设置两个矩形的旋转动画参数实现波浪效果，两个矩形的动画时间，旋转时的位置都有所不同，所以看起来更加自然一点，最终效果如下：
效果图
思考
在实际项目中可以根据不同的场景设置，比如要动态展示进度效果，可以通过实时计算来改变矩形的样式来实现进度的改变，这里是通过它们的 bottom 来改变进度的大小的，在 vue 或 react 项目里动态改变也是比较简单的。
