CSS实现雪花飘落效果【小程序圣诞节需求】

效果预览：

代码实现：

.snow-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 600rpx;
    overflow: hidden;
    &::before {
        content: ' ';
        display: block;
        position: absolute;
        top: 0;
        left: -50%;
        width: 200%;
        height: 100%;
        background-image: url(https://xxx/snow2.png);
        background-size: 20rem 20rem;
        animation: snow 28s linear infinite;
    }
    &::after {
        content: ' ';
        display: block;
        position: absolute;
        top: 0;
        left: -50%;
        width: 200%;
        height: 100%;
        background-image: url(https://xxx/snow1.png);
        background-size: 20rem 20rem;
        animation: snow 18s linear infinite;
    }
    @keyframes snow {
        0% {
            background-position-x: 0;
            background-position-y: 0;
        }
        50% {
            background-position-y: 20rem;
        }
        100% {
            background-position-x: 20rem;
            background-position-y: 40rem;
        }
    }
}