<style>
    .snow-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 9999;
    }
    .snow-banner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('https://bayigram.com/assets/img/snowflakes1.webp'), url('https://bayigram.com/assets/img/snowflakes2.webp'), url('https://bayigram.com/assets/img/snowflakes3.webp');
        -webkit-animation: snow 15s linear infinite;
        -moz-animation: snow 15s linear infinite;
        -ms-animation: snow 15s linear infinite;
        animation: snow 15s linear infinite;
    }
    @keyframes snow {
        0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
        50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
        100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
    }
    @-moz-keyframes snow {
        0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
        50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
        100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
    }
    @-webkit-keyframes snow {
        0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
        50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
        100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
    }
    @-ms-keyframes snow {
        0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
        50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
        100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
    }
</style>
<div class="snow-container">
    <div class="snow-banner"></div>
</div>