css水涟漪

只是底部涟漪的代码

         <div className={styles.containerWrap}>
                              <div className={styles.container}>
                                <div className={styles.box}>
                                  <span style={{ '--i': 1 }} />
                                  <span style={{ '--i': 2 }} />
                                  <span style={{ '--i': 3 }} />
                                  <span style={{ '--i': 4 }} />
                                </div>
                              </div>
                            </div>

css
.container {
    position       : relative;
    display        : flex;
    justify-content: center;
    align-items    : center;
    flex-direction : row;

    .box {
        width          : 400px;
        height         : 100px;
        display        : flex;
        justify-content: center;
        align-items    : center;
        margin         : 50px 0;

        span {
            position       : absolute;
            box-sizing     : border-box;
            border         : none;
            border-radius  : 50%;
            animation      : animate 4s linear infinite;
            animation-delay: calc(0.6s * var(--i));
           background: radial-gradient(rgba(2,20,55,0.00), #0b54c2);
           
        }

    }



}


@keyframes animate {
    0% {
        width : 0;
        height: 0;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        width  : 400px;
        height : 80px;
        opacity: 0;
    }
}