js下雨代码
时间: 2023-08-15 07:05:50 浏览: 51
下面是一个简单的 JavaScript 雨滴效果代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Rain Effect</title>
<style type="text/css">
body {
background-color: black;
overflow: hidden;
}
.raindrop {
position: absolute;
top: -50px;
animation: fall linear infinite;
animation-duration: 1s;
animation-timing-function: linear;
}
@keyframes fall {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100vh);
}
}
</style>
</head>
<body>
<script type="text/javascript">
var drops = [];
for (var i = 0; i < 100; i++) {
var drop = document.createElement("div");
drop.className = "raindrop";
drop.style.left = Math.random() * window.innerWidth + "px";
drop.style.animationDelay = Math.random() * 5 + "s";
drops.push(drop);
document.body.appendChild(drop);
}
</script>
</body>
</html>
```
这段代码会在页面上生成一百个雨滴,每个雨滴会从顶部自上而下落下,并且具有随机的位置和延迟。您可以根据需要调整代码。