原先以为水球那么复杂的动画只能是用封装好的，像Echarts上的水球，
后来偶然发现，其实水球的动画好简单的，纯CSS就可以实现。以下为效果图：
水球2.gif
Step1HTML,共需要4个div,一个是最外层的圆球，里面3个div，是3条不同颜色的波纹。
<div className="water_waves">
<div className="water_wave1"></div>
<div className="water_wave2"></div>
<div className="water_wave3"></div>
</div>
Step2 CSS 里面3个div要相对于父级圆球div绝对定位。
.water_waves{
width: 100px;
height: 100px;
border: 1px solid #ccc;
border-radius: 50%;
margin: auto;
position: relative;
}
.water_wave1{
background-color: #33cfff;
position: absolute;
width: 200%;
height: 200%;
top: 40%;
left: -25%;
opacity: 0.7;
border-radius: 40%;
}
.water_wave2{
position: absolute;
width: 200%;
height: 200%;
background-color: #0eaffe;
top: 45%;
left: -35%;
border-radius: 35%;
opacity: 0.5;
}
.water_wave3{
position: absolute;
width: 200%;
height: 200%;
top: 50%;
left: -35%;
opacity: 0.3;
background-color: #0f7ae4;
border-radius: 33%;
}
此时效果如下：
WX20190814-150509.png
Step3 隐藏水球之外的部分。
.water_waves{
over-flow: hidden;
}
现在的静态图已经出来了，如下：
WX20190814-150808.png
那现在重点来了，如何动起来？？其实小伙伴们估计都明白了，就是只需要让里面的3个div旋转起来即可，也就是rotate。
Step4 外层水球的自定义动画。
@keyframes water-waves{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.water_waves{
animation: water-waves linear infinite;
}
这样看起来并没有什么变化，因为圆球再怎么转起来也还是圆的，下面就需要设置里面各个div的动画啦~
Step5 最后一步，让里面的div转起来并且，还不能一起转，第二个第三个还得延时转。
.water_wave1{
animation: inherit;
animation-duration: 5s;
}
.water_wave2{
animation: inherit;
animation-duration: 7s;
}
.water_wave3{
animation: inherit;
animation-duration: 11s;
}
这样完整的水球图就做好啦~
