CSS动画之水球

原先以为水球那么复杂的动画只能是用封装好的，像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;
}

这样完整的水球图就做好啦~

CSS动画之水球

推荐阅读更多精彩内容