출처 : 유튜브 노마드코더
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;
}