花里胡哨的canvas实现太过于繁琐，这就是本文存在的意义.

 

　　效果图

 

　　拆解

 

　　首先画一个简单的盒子:

 

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

 

　　父元素设置overflow: hidden

 

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

 

　　代码

 

　　html

 

　　<div class="wave"></div>

 

　　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;

 

　　}

 

　　// 其中一个不规则圆形调整一下样式，以便区分（或者调整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成功偷梁换柱，舒服得很