<!DOCTYPE html>
<html>
<head>
<title>Snowflake Effect</title>
<style>
body {
background-color: #000;
}
.snowflake {
position: absolute;
display: block;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
animation: snowflakes 5s linear infinite;
box-shadow: 0 0 5px #fff;
}
@keyframes snowflakes {
0% {
transform: translateY(-50px) rotate(0deg);
}
100% {
transform: translateY(1000px) rotate(360deg);
}
}
</style>
</head>
<body>
<script>
for (var i = 0; i < 50; i++) {
var snowflake = document.createElement("div");
snowflake.className = "snowflake";
snowflake.style.top = Math.random() * window.innerHeight + "px";
snowflake.style.left = Math.random() * window.innerWidth + "px";
document.body.appendChild(snowflake);
}
</script>
</body>
</html>
