简易html满天星效果
warning:
这篇文章距离上次修改已过201天，其中的内容可能已经有所变动。
要创建一个简易的HTML满天星效果，可以使用CSS动画来实现。以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>满天星</title>
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.star {
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
position: absolute;
top: 0;
left: 50%;
animation: twinkle 1s infinite alternate ease-in-out;
}
@keyframes twinkle {
from {
transform: scale(0.5);
opacity: 0.5;
}
to {
transform: scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="star"></div>
<script>
// 动态创建多个星星
const numStars = 100; // 可以根据需要调整星星数量
for (let i = 0; i < numStars; i++) {
const star = document.createElement('div');
star.classList.add('star');
// 随机位置
star.style.top = `${Math.random() * 100}%`;
document.body.appendChild(star);
}
</script>
</body>
</html>这段代码会创建100个星星，它们随机分布在页面上，并通过CSS动画随机闪烁，模拟出星空中的满天星光效果。你可以根据需要调整.star的样式和@keyframes twinkle动画的细节来改变星星的大小、颜色和闪烁的速度。
评论已关闭