<!DOCTYPE html>
<html>
<head>
<title>圣诞节特效</title>
</head>
<body>
<div id="snowflakes"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function() {
const snowflakes = document.getElementById('snowflakes');
const numberOfSnowflakes = 100; // 可以根据需要调整雪花的数量
for(let i = 0; i < numberOfSnowflakes; i++) {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.style.left = Math.random() * window.innerWidth + 'px'; // 让雪花随机分布在窗口的宽度上
snowflake.style.animationDuration = Math.random() * 3 + 2 + 's'; // 让雪花的降落速度有所不同，形成更真实的效果
snowflakes.appendChild(snowflake);
}
}
</script>
<style>
body {
background: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
#snowflakes {
width: 100%;
height: 100%;
}
.snowflake {
position: absolute;
bottom: 50%;
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
animation: fall linear infinite;
}
@keyframes fall {
to {
transform: translateY(100vh);
}
}
</style>
