크리스마스 눈송이 효과

출처 : 유튜브 노마드코더
https://youtu.be/3CuUmy7jX6k

javascript

const MIN_DURATION = 10
const body = document.querySelector('body')

function makeSnowflake() {
  const snowflake = document.createElement('div')
  const delay = Math.random() * 10
  const initialOpacity = Math.random()
  const duration = Math.random() * 20 + MIN_DURATION

  snowflake.classList.add('snowflake')
  snowflake.style.left = `${Math.random() * window.screen.width}px`
  snowflake.style.animationDelay = `${delay}s`
  snowflake.style.opacity = initialOpacity
  snowflake.style.animation = `fall ${duration}s linear`

  body.appendChild(snowflake)
  setTimeout(() => {
    body.removeChild(snowflake)
    makeSnowflake()
  }, (duration + delay) * 1000)
}

for (let i = 0; i < 50; i += 1) {
  makeSnowflake()
}

css

@keyframes fall {
        from {
        }
        to {
          transform: translateY(98vh);
          opacity: 0;
        }
      }
      .snowflake {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: white;
        position: absolute;
        top: -8px;
      }