"使用 CSS3 制作雪花效果:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #000;
}
.snowflake {
position: absolute;
top: 0;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
animation: snowfall linear infinite;
}
@keyframes snowfall {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100vh);
}
}
</style>
</head>
<body>
<script>
// 创建雪花
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.style.left = Math.random() * 100 + 'vw';
document.body.appendChild(snowflake);
setTimeout(() => {
snowflake.remove();
}, 10000);
}
// 控制雪花生成频率
function startSnowfall() {
setInterval(createSnowflake, 200);
}
// 页面加载完成后开始雪花效果
window.addEventListener('load', startSnowfall);
</script>
</body>
</html>
以上是使用 CSS3 制作雪花效果的代码。效果是在网页上出现随机下落的小圆点,模拟雪花的效果。通过 CSS3 的 animation 属性和 keyframes 关键帧动画,控制小圆点的下落动画。通过 JavaScript 动态生成小圆点,并设定其随机的位置。通过定时器控制小圆点的生成频率,并设定一定的时间后移除已经下落完毕的小圆点。
在页面加载完成后,调用 startSnowfall 函数开始雪花效果。该函数通过 setInterval 定时调用 createSnowflake 函数生成雪花小圆点,并设置每次生成的间隔时间为 200 毫秒。createSnowflake 函数会在页面中动态创建一个 div 元素,并添加 snowflake 类名,用于设置样式。同时,通过设置 left 属性来随机设定小圆点的水平位置。生成的小圆点会被添加到 body 元素中,并在 10000 毫秒后自动移除。
通过以上代码,我们可以在网页上实现一个简单的雪花效果。可以根据需要调整样式和参数,实现更加丰富多样的雪花效果。"