html流星雨代码
209
以下是一个简单的 HTML 流星雨代码
<!DOCTYPE html>
<html>
<head>
<title>流星雨</title>
<style>
body {
background-color: #000;
}
.star {
position: absolute;
width: 2px;
height: 2px;
background-color: #fff;
border-radius: 50%;
-webkit-animation: shooting-star 5s linear infinite;
animation: shooting-star 5s linear infinite;
opacity: 0;
z-index: -1;
}
@-webkit-keyframes shooting-star {
from {
opacity: 1;
-webkit-transform: translateX(100vw) translateY(-20vh);
}
to {
opacity: 0;
-webkit-transform: translateX(-10vw) translateY(50vh);
}
}
@keyframes shooting-star {
from {
opacity: 1;
transform: translateX(100vw) translateY(-20vh);
}
to {
opacity: 0;
transform: translateX(-10vw) translateY(50vh);
}
}
</style>
</head>
<body>
<script>
function createStar() {
const star = document.createElement('div');
star.classList.add('star');
star.style.left = Math.random() * window.innerWidth + 'px';
star.style.top = Math.random() * window.innerHeight + 'px';
document.body.appendChild(star);
setTimeout(() => {
star.remove();
}, 5000);
}
setInterval(createStar, 100);
</script>
</body>
</html>
该代码通过使用 CSS 动画来创建流星的效果，使用 JavaScript 在页面上生成随机位置的星星，并在一段时间后移除它们。您可以将该代码复制到一个 HTML 文件中并在浏览器中打开它，以查看流星雨效果。
