如何在我的网页上添加降雪效果？
简单的代码片段，可在您的网站上创建微妙的雪花效果。此效果将使用小的白色雪花轻轻落在页面上，这应该适用于桌面和移动设备。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snowfall Effect</title>
<style>
/* Snowflake styling */
.snowflake {
position: fixed;
top: -10px;
color: #FFFFFF; /* Snow color */
font-size: 12px;
z-index: 9999;
pointer-events: none;
opacity: 0.8;
animation: fall linear infinite;
}
@keyframes fall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}
</style>
</head>
<body>
<h1>Welcome to My Blog</h1>
<p>This is a blog post with a subtle snow effect.</p>
<script>
// Function to create snowflakes
function createSnowflakes() {
const snowflake = document.createElement("div");
snowflake.classList.add("snowflake");
snowflake.innerHTML = "❄"; // Unicode for a snowflake symbol
// Random positions and size for each snowflake
snowflake.style.left = `${Math.random() * 100}vw`;
snowflake.style.animationDuration = `${Math.random() * 3 + 2}s`; // Varies speed between 2s and 5s
snowflake.style.fontSize = `${Math.random() * 10 + 10}px`; // Varies size between 10px and 20px
document.body.appendChild(snowflake);
// Remove snowflake after it falls
setTimeout(() => {
snowflake.remove();
}, 5000); // 5 seconds or the maximum animation duration
}
// Interval to create snowflakes every 500 milliseconds
setInterval(createSnowflakes, 500);
</script>
</body>
</html>
使用说明：