눈 내리는 페이지 만들기

See the Pen Untitled by Jungwon (@ajw000) on CodePen.

 .snow{
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            top: -13px;
            animation: fall 10s linear;
        }
        @keyframes fall{
        from{
        }
        to{
            transform: translateY(90vh);
            opacity: 0;
        }
    }
    
    body{
    	background-color: rgb(56, 56, 56)
    }

    const body = document.querySelector("body");

    function makeSnow(){
        const snow = document.createElement("div");
        const delay = Math.random() *10;
        const initialOpacity = Math.random();
        const duration = Math.random() * 10;
        const snowSize = (Math.random() * 10) + 'px' ;

        snow.classList.add("snow");
        snow.style.left =  (Math.random() * (window.screen.width * 0.95 ))+'px';
        snow.style.animationDelay = delay + 's';
        snow.style.opacity = initialOpacity;
        snow.style.animation = 'fall ' + duration + 's linear'; 
        snow.style.width = snowSize;
        snow.style.height = snowSize;


        body.appendChild(snow);
        setTimeout(()=> {
            body.removeChild(snow);
        }, 9000);
    }
    /*
    for(let index = 0; index < 50; index++){
        //makeSnow();
        setTimeout(makeSnow(), 500*index);
    }
    */
    setInterval(() => {
        for(let index = 0; index < 10; index++){
        setTimeout(makeSnow(), 500*index);
    }
    }, 200);