以下是一个简单的 HTML 实现流星雨特效的代码：
<!DOCTYPE html>
<html>
<head>
<title>流星雨特效</title>
<style>
body {
background-color: #000000;
}
.star {
position: absolute;
background-color: #FFFFFF;
border-radius: 50%;
width: 3px;
height: 3px;
opacity: 0;
animation: blink 2s infinite;
}
@keyframes blink {
50% {
opacity: 1;
}
}
.meteor {
position: absolute;
background-image: linear-gradient(45deg, #FFFFFF, transparent);
height: 20px;
width: 2px;
animation: fall linear 0.5s infinite;
}
@keyframes fall {
from {
transform: translate(-20px, -20px);
}
to {
transform: translate(100vw, 100vh);
}
}
</style>
</head>
<body>
<script>
function createStar() {
const star = document.createElement("div");
star.classList.add("star");
star.style.top = Math.random() * window.innerHeight + "px";
star.style.left = Math.random() * window.innerWidth + "px";
document.body.appendChild(star);
setTimeout(() => {
star.remove();
}, 2000);
}
function createMeteor() {
const meteor = document.createElement("div");
meteor.classList.add("meteor");
meteor.style.top = Math.random() * window.innerHeight + "px";
meteor.style.left = Math.random() * window.innerWidth + "px";
document.body.appendChild(meteor);
setTimeout(() => {
meteor.remove();
}, 500);
}
setInterval(createStar, 50);
setInterval(createMeteor, 1000);
</script>
</body>
</html>
这段代码使用了 HTML、CSS 和 JavaScript 来创建流星雨特效。它首先定义了两种元素，.star 和 .meteor，用于表示星星和流星。.star 元素使用了闪烁的动画，而 .meteor 元素使用了向下移动的动画。
接下来，使用 JavaScript 创建了两个函数 createStar 和 createMeteor，分别用于创建星星和流星。这些函数在随机位置创建了对应的元素，并在一定时间后将它们删除，以保证不会出现太多的元素导致页面崩溃。
最后，使用 setInterval 函数调用这两个函数，以使它们以一定的频率不断创建新的元素，从而形成流星雨特效。
猜你喜欢：
评论