<style>
body {
margin: 0;
padding: 0;
background: #001f3f;
overflow: hidden;
}
.snowflake {
position: fixed;
top: -10px;
color: white;
font-size: 1em;
user-select: none;
z-index: 9999;
animation-name: fall;
animation-timing-function: linear;
}
@keyframes fall {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(100vh);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
const snowflakes = 100;
for (let i = 0; i < snowflakes; i++) {
let snowflake = document.createElement("div");
snowflake.classList.add("snowflake");
snowflake.innerHTML = "❄";
snowflake.style.left = Math.random() * 100 + "vw";
snowflake.style.fontSize = Math.random() * 10 + 10 + "px";
snowflake.style.animationDuration = (Math.random() * 5 + 5) + "s";
snowflake.style.animationDelay = Math.random() * 5 + "s";
document.body.appendChild(snowflake);
}
</script>
