直入主题：首先画一个简单的盒子:

利用::before与::after画两个圆角值(radius)不同的不规则圆形:

父元素设置overflow: hidden

最后加上animation动画让两个不规则圆形旋转起来即可

代码

html

scss// 简单的盒子

.wave {

position: relative;

width: 150px;

height: 150px;

background-color: #5291e0;

overflow: hidden;

// 两个不规则圆形(相对盒子进行定位，距离底部距离则为波浪高度)

&::before,

&::after {

content: "";

position: absolute;

left: 50%;

bottom: 15%;

width: 500%;

height: 500%;

border-radius: 45%;

background-color: #fff;

transform: translateX(-50%); // 居中

animation: rotate 15s linear infinite;

}web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

// 其中一个不规则圆形调整一下样式，以便区分(或者调整animation的参数来区分)

&::before {

bottom: 10%;

opacity: .5;

border-radius: 47%;

}

}

}

// 旋转动画

@keyframes rotate {

from {

transform: translateX(-50%) rotateZ(0deg);

}

to {

transform: translateX(-50%) rotateZ(360deg);

}

}

)

总结

效果图第一眼看上去，让"蓝色"部分动起来，真的很难，所以采用逆向思维，直接操控"白色"部分再来个overflow: hidden成功偷梁换柱，舒服得很。