html星星坠落效果代码
时间: 2023-09-21 19:08:25 浏览: 40
以下是一个简单的 HTML 星星坠落效果代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>星星坠落效果</title>
<style>
body {
background-color: black;
overflow: hidden;
}
.star {
position: absolute;
width: 2px;
height: 2px;
background-color: white;
border-radius: 50%;
animation: fall 5s linear infinite;
}
@keyframes fall {
0% {
transform: translate(0,-10px);
opacity: 1;
}
100% {
transform: translate(100vw,100vh);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
// 生成随机数
function random(min, max) {
return Math.random() * (max - min) + min;
}
// 生成星星
function createStar() {
var star = document.createElement("div");
star.className = "star";
star.style.left = random(0, window.innerWidth) + "px";
star.style.animationDelay = random(0, 5) + "s";
document.body.appendChild(star);
setTimeout(function() {
star.remove();
}, 5000);
}
// 生成多个星星
for (var i = 0; i < 50; i++) {
createStar();
}
</script>
</body>
</html>
```
这段代码会在页面上生成多个大小不一、随机位置、随机延迟的星星,然后让它们沿着斜线方向坠落,最终消失。可以通过调整 CSS 样式和 JavaScript 中的参数来改变坠落效果。