用HTML写一段下雨代码
时间: 2023-03-20 21:01:04 浏览: 70
以下是一个使用HTML和CSS实现下雨效果的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>下雨特效</title>
<style>
body {
background-color: black; /* 将背景设置为黑色 */
overflow: hidden; /* 隐藏页面滚动条 */
}
.rain {
position: absolute; /* 设置为绝对定位 */
top: -50px; /* 初始位置为页面顶部 */
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 禁止鼠标事件 */
}
.drop {
position: absolute;
background-color: white; /* 设置雨滴颜色 */
width: 1px; /* 设置雨滴宽度 */
height: 50px; /* 设置雨滴高度 */
animation: fall linear infinite; /* 添加动画效果 */
}
@keyframes fall {
to {
transform: translateY(100vh); /* 设置滑落的终点位置 */
}
}
</style>
</head>
<body>
<div class="rain">
<!-- 使用 JavaScript 动态生成雨滴元素 -->
</div>
<script>
// 获取容器元素
const container = document.querySelector('.rain');
// 设置雨滴数量
const drops = 50;
// 生成雨滴
for (let i = 0; i < drops; i++) {
const drop = document.createElement('div');
drop.classList.add('drop');
drop.style.left = `${Math.random() * 100}%`; // 随机设置雨滴的横坐标
drop.style.animationDelay = `${Math.random() * 5}s`; // 随机设置雨滴的动画延迟时间
container.appendChild(drop);
}
</script>
</body>
</html>
```
这段代码通过设置一个名为 `.rain` 的容器元素,并在其中使用 JavaScript 动态生成多个名为 `.drop` 的雨滴元素,利用 CSS 的动画效果实现雨滴不断下落的效果,从而实现下雨特效。