.wave{
width: 200px;
height: 200px;
background-color: skyblue;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/* // 两个不规则圆形（相对盒子进行定位，距离底部距离则为波浪高度） */
.wave::before,.wave::after{
content: "";
position: absolute;
left: 50%;
bottom: 15%;
width: 500%;
height: 500%;
border-radius: 45%;
background-color: #fff;
transform: translateX(-50%);
animation:rotate 10s linear infinite;
}
/*
// 其中一个不规则圆形调整一下样式，以便区分（或者调整animation的参数来区分） */
.wave::before{
bottom: 8%;
opacity: 0.6;
border-radius: 50%;
}
/* // 旋转动画 */
@keyframes rotate{
from{
transform: translateX(-50%) rotateZ(0deg);
}
to{
transform: translateX(-50%) rotateZ(360deg);
}
}
