如何用CSS动画实现星空闪烁背景 CSS动画模拟宇宙动效氛围

<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<!-- 更多星星 -->

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: white;
  border-radius: 50%; /* 使星星更圆润 */
  animation: twinkle 2s linear infinite; /* 关键：应用动画 */
}

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

const starContainer = document.getElementById('star-container'); // 假设有一个容器元素
const numberOfStars = 100;

for (let i = 0; i < numberOfStars; i++) {
  const star = document.createElement('div');
  star.classList.add('star');
  star.style.top = `${Math.random() * 100}%`;
  star.style.left = `${Math.random() * 100}%`;
  star.style.animationDelay = `${Math.random() * 2}s`; // 随机延迟
  starContainer.appendChild(star);
}

.shooting-star {
  position: absolute;
  top: 0; /* 从顶部开始 */
  left: 0; /* 从左侧开始，也可以随机 */
  width: 100px; /* 流星的长度 */
  height: 2px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white); /* 渐变效果 */
  animation: shooting 5s linear infinite;
  transform-origin: 0 0; /* 确保旋转中心在左上角 */
  transform: rotate(-45deg); /* 倾斜角度 */
}

@keyframes shooting {
  0% {
    transform: translateX(0) translateY(0) rotate(-45deg);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(500px) translateY(500px) rotate(-45deg); /* 移动到远处 */
    opacity: 0; /* 逐渐消失 */
  }
}

.starry-sky {
  width: 100%;
  height: 100vh;
  background-image: url('starry-sky.jpg'); /* 替换为你的星空背景图片 */
  background-size: cover;
  animation: pan 20s linear infinite;
}

@keyframes pan {
  0% { background-position: 0 0; }
  100% { background-position: 100% 0; } /* 水平滚动 */
}