CSS动画实现漂亮的波浪动画效果

实际效果比录制的更流畅平滑。
实现思路。

1. 最上层的图片，3是镂空的，这有一些透明和半透明渐变的效果。
2. 下边的波浪，是有3个不同颜色圆角矩形，通过animation动画实现转动，每个动画的时间不一样，产生了不规则的波浪效果。

不多说，贴代码

html部分

<div class="number">
        <div class="img"></div>
        <div class="wave">
            <div class="w1"></div>
            <div class="w2"></div>
            <div class="w3"></div>
        </div>
    </div>

CSS部分

.number {
    overflow: hidden;
    position: relative;
    width   : 385px;
    height  : 434px;

}

.img {
    position  : absolute;
    width     : 385px;
    height    : 434px;
    z-index   : 99;
    top       : 0;
    left      : 0;
    background: url(images/3.png) no-repeat center center;
}

.wave {
    position: relative;
}

.wave div {
    position     : absolute;
    top          : 136px;
    left         : 50%;
    width        : 500px;
    height       : 500px;
    margin-left  : -250px;
    border-radius: 40%;
}

.w1 {
    background: #ffef43;
    opacity   : 0.4;
    animation : drift 4s infinite linear;
}

.w2 {
    background: #ffbed3;
    opacity   : 0.6;
    animation : drift 6s infinite linear;
}

.w3 {
    background: #ff46c9;
    opacity   : 0.4;
    animation : drift 5s infinite linear;
}

@keyframes drift {
    from {
        -webkit-transform: rotate(0deg);
        transform        : rotate(0deg);
    }

    from {
        -webkit-transform: rotate(360deg);
        transform        : rotate(360deg);
    }
}```