繁星闪动js

<div id="star-container">
  <!-- 星星将由JavaScript动态生成 -->
</div>

#star-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: black;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  animation: twinkle 2s infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

function createStar() {
  const starContainer = document.getElementById('star-container');
  const star = document.createElement('div');
  star.className = 'star';
  
  // 随机位置
  star.style.left = `${Math.random() * 100}vw`;
  star.style.top = `${Math.random() * 100}vh`;
  
  // 随机大小和动画延迟
  const size = Math.random() * 2 + 1;
  const delay = Math.random() * 2;
  star.style.width = `${size}px`;
  star.style.height = `${size}px`;
  star.style.animationDelay = `${delay}s`;
  
  starContainer.appendChild(star);
}

// 创建一定数量的星星
for (let i = 0; i < 100; i++) {
  createStar();
}