html流星雨代码

飞飞 1年前 648

以下是一个简单的 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 文件中并在浏览器中打开它，以查看流星雨效果。

我来回复

暂无回复内容