前端写动态的下雪html网页
时间: 2023-10-18 10:04:18 浏览: 105
下雪效果可以通过 CSS 动画和 JavaScript 实现。以下是一个简单的示例,可以在 HTML 页面中使用:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下雪效果</title>
<style>
/* 雪花样式 */
.snowflake {
position: absolute;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
pointer-events: none;
animation: snow linear infinite;
}
/* 雪花动画 */
@keyframes snow {
0% {
transform: translateY(-40px) rotate(0deg);
}
100% {
transform: translateY(600px) rotate(360deg);
}
}
</style>
</head>
<body>
<script>
// 创建雪花
function createSnowflake() {
const snowflake = document.createElement("div");
snowflake.classList.add("snowflake");
snowflake.style.left = Math.random() * window.innerWidth + "px";
document.body.appendChild(snowflake);
setTimeout(() => {
snowflake.remove();
}, 10000);
}
// 生成雪花
setInterval(createSnowflake, 100);
</script>
</body>
</html>
```
代码中使用了 CSS 动画和 JavaScript 定时器来实现雪花的飘落效果。在页面中加载该代码后,就能看到下雪的效果了。