html网站背景雪花飘落效果代码
以下是一个使用HTML、CSS和JavaScript实现背景雪花飘落效果的代码示例，其中使用了一张实际的雪花图片作为雪花的图标：
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
overflow: hidden;
height: 100vh;
background: #000;
}
.snowflake {
position: absolute;
background: url('snowflake.png') no-repeat;
width: 30px;
height: 30px;
animation: fall 5s linear infinite;
}
@keyframes fall {
0% { top: -100px; }
100% { top: 9999px; }
}
</style>
</head>
<body>
<script>
const numSnowflakes = 50;
const snowflakes = [];
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.style.left = Math.random() * window.innerWidth + 'px';
snowflake.style.top = Math.random() * window.innerHeight + 'px';
document.body.appendChild(snowflake);
snowflakes.push(snowflake);
}
function moveSnowflakes() {
for (let i = 0; i < numSnowflakes; i++) {
const snowflake = snowflakes[i];
snowflake.style.left = `${parseInt(snowflake.style.left) - 1}px`;
if (parseInt(snowflake.style.left) < -30) {
createSnowflake();
}
}
requestAnimationFrame(moveSnowflakes);
}
moveSnowflakes();
</script>
</body>
</html>解释代码：
首先，我们定义了一个黑色的背景。通过设置overflow为hidden，我们确保网页的内容不会超出这个背景。
然后，我们定义了一个名为.snowflake的CSS样式类。这个类被应用到了一个div元素上，并设置了绝对定位。我们还设置了背景为一张雪花图片，宽度和高度为30像素。最后，我们定义了一个名为fall的动画，使得这个元素在5秒钟内从上往下移动。
在JavaScript部分，我们首先定义了一个常量numSnowflakes，表示雪花的数量。然后，我们创建了一个空数组snowflakes，用于存储所有的雪花元素。
接着，我们定义了一个名为createSnowflake的函数。这个函数创建了一个新的div元素，并应用了.snowflake样式类。然后，我们随机设置了该元素的水平位置和垂直位置，并将其添加到了网页的主体中。最后，我们将该元素添加到了snowflakes数组中。
接下来，我们定义了一个名为moveSnowflakes的函数。这个函数遍历所有的雪花元素，并将它们的水平位置减去1像素。如果某个雪花的水平位置小于-30像素，那么就会在新的位置上创建一个新的雪花。最后，我们使用requestAnimationFrame函数来不断调用这个函数，从而实现雪花的持续移动。
最后，我们调用了moveSnowflakes函数来启动雪花的移动。
