CSS3波纹背景滤镜平铺滚动

CSS3波纹背景滤镜平铺滚动

.wave {
    position: relative;
    width: 700px;
    height: 700px;
    background-color: rgb(9, 192, 131);
}

.wave::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(253, 253, 253) 25%, transparent 25%) -60px 0, linear-gradient(225deg, rgb(255, 255, 255) 25%, transparent 25%) -60px 0, linear-gradient(315deg, rgb(255, 255, 255) 25%, transparent 25%), linear-gradient(45deg, rgb(252, 252, 252) 25%, transparent 25%);
    background-size: 40px 40px;
    animation: wave 6s 0s linear infinite;
}

@keyframes wave {
    0% {
        background-position-y: 0;

    }
    100% {
        background-position-y: -100%;
    }
}