用html写一个流星雨
时间: 2023-10-03 17:10:40 浏览: 193
梦幻流星雨Canvas特效
<!DOCTYPE html>
<html>
<head>
<title>流星雨</title>
<style>
body {
background-color: black;
}
.star {
position: absolute;
width: 10px;
height: 10px;
background-color: white;
border-radius: 50%;
opacity: 0;
animation: star-fall 1s linear infinite;
}
@keyframes star-fall {
0% {
transform: translate(0, -100px);
opacity: 1;
}
100% {
transform: translate(100vw, 100vh);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
function createStar() {
const star = document.createElement('div');
star.classList.add('star');
star.style.left = Math.random() * window.innerWidth + 'px';
document.body.appendChild(star);
setTimeout(() => {
star.remove();
}, 1000);
}
setInterval(() => {
createStar();
}, 100);
</script>
</body>
</html>
阅读全文