html {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}

/* 星空背景层 */
#stars,
#stars2,
#stars3 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 100px 200px #fff, 300px 400px #fff, 500px 100px #fff,
    700px 300px #fff, 900px 600px #fff, 1200px 800px #fff, 1500px 200px #fff,
    1700px 900px #fff, 1800px 500px #fff, 2000px 100px #fff, 2200px 700px #fff,
    2400px 300px #fff, 2600px 800px #fff, 2800px 400px #fff, 3000px 900px #fff,
    3200px 200px #fff, 3400px 600px #fff, 3600px 100px #fff, 3800px 700px #fff,
    4000px 300px #fff;
  animation: animStar 50s linear infinite;
}
#stars:after {
  content: " ";
  position: absolute;
  top: 1000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 100px 200px #fff, 300px 400px #fff, 500px 100px #fff,
    700px 300px #fff, 900px 600px #fff, 1200px 800px #fff, 1500px 200px #fff,
    1700px 900px #fff, 1800px 500px #fff, 2000px 100px #fff, 2200px 700px #fff,
    2400px 300px #fff, 2600px 800px #fff, 2800px 400px #fff, 3000px 900px #fff,
    3200px 200px #fff, 3400px 600px #fff, 3600px 100px #fff, 3800px 700px #fff,
    4000px 300px #fff;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 200px 800px #fff, 400px 1200px #fff, 600px 1600px #fff,
    800px 400px #fff, 1000px 1000px #fff, 1300px 1400px #fff, 1600px 600px #fff,
    1800px 1200px #fff, 2000px 800px #fff, 2200px 1600px #fff, 2400px 400px #fff,
    2600px 1000px #fff, 2800px 1400px #fff, 3000px 600px #fff,
    3200px 1200px #fff, 3400px 800px #fff, 3600px 1600px #fff, 3800px 400px #fff,
    4000px 1000px #fff;
  animation: animStar 100s linear infinite;
}
#stars2:after {
  content: " ";
  position: absolute;
  top: 1000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 200px 800px #fff, 400px 1200px #fff, 600px 1600px #fff,
    800px 400px #fff, 1000px 1000px #fff, 1300px 1400px #fff, 1600px 600px #fff,
    1800px 1200px #fff, 2000px 800px #fff, 2200px 1600px #fff, 2400px 400px #fff,
    2600px 1000px #fff, 2800px 1400px #fff, 3000px 600px #fff,
    3200px 1200px #fff, 3400px 800px #fff, 3600px 1600px #fff, 3800px 400px #fff,
    4000px 1000px #fff;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 300px 1500px #fff, 600px 1000px #fff, 900px 1800px #fff,
    1200px 600px #fff, 1500px 1200px #fff, 1800px 1700px #fff, 2100px 900px #fff,
    2400px 1500px #fff, 2700px 600px #fff, 3000px 1200px #fff,
    3300px 1800px #fff, 3600px 900px #fff, 3900px 1500px #fff;
  animation: animStar 150s linear infinite;
}
#stars3:after {
  content: " ";
  position: absolute;
  top: 1000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 300px 1500px #fff, 600px 1000px #fff, 900px 1800px #fff,
    1200px 600px #fff, 1500px 1200px #fff, 1800px 1700px #fff, 2100px 900px #fff,
    2400px 1500px #fff, 2700px 600px #fff, 3000px 1200px #fff,
    3300px 1800px #fff, 3600px 900px #fff, 3900px 1500px #fff;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}