html最少代码写一个流星雨
时间: 2024-01-29 21:02:44 浏览: 73
以下是最少代码实现流星雨的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>流星雨</title>
<style>
body {
background-color: black;
}
.star {
position: absolute;
background-color: white;
width: 2px;
height: 2px;
border-radius: 50%;
animation: shooting-star 1s linear infinite;
}
@keyframes shooting-star {
from {
top: 0;
left: 0;
transform: rotate(45deg);
}
to {
top: 100%;
left: 100%;
transform: rotate(-135deg);
}
}
</style>
</head>
<body>
<script>
function createStar() {
const star = document.createElement("div");
star.classList.add("star");
star.style.top = Math.random() * 100 + "%";
star.style.left = Math.random() * 100 + "%";
document.body.appendChild(star);
setTimeout(() => {
document.body.removeChild(star);
}, 1000);
}
setInterval(createStar, 200);
</script>
</body>
</html>
```
这个代码实现了一个简单的流星雨效果,每 200 毫秒随机在页面中创建一个白色小球,然后让它飞行到页面底部,飞行过程中加入了旋转动画,最后在页面底部消失。
阅读全文