유성

<div class="sky" id="sky"></div>

.sky{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#141428,#07070d 70%)}
.m{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.1);transform:rotate(35deg)}
.m::before{content:"";position:absolute;top:1px;right:1px;width:70px;height:1px;
  background:linear-gradient(90deg,#fff,transparent);transform-origin:right center}

const sky = document.getElementById('sky');
const N = 8;
const meteors = [];
for (let i = 0; i < N; i++) {
  const el = document.createElement('div');
  el.className = 'm';
  sky.appendChild(el);
  meteors.push(el);
}
function launch(el) {
  const startX = Math.random() * 120 - 10;
  const dur = 1.6 + Math.random() * 1.6;
  const delay = Math.random() * 3.5;
  el.style.left = startX + '%';
  el.style.top = '-5%';
  el.style.opacity = '0';
  el.animate(
    [
      { transform: 'rotate(35deg) translate(0,0)', opacity: 0, offset: 0 },
      { opacity: 1, offset: 0.06 },
      { transform: 'rotate(35deg) translate(220px,300px)', opacity: 0, offset: 1 },
    ],
    { duration: dur * 1000, delay: delay * 1000, iterations: 1 },
  ).onfinish = () => launch(el);
}
meteors.forEach((el, i) => setTimeout(() => launch(el), i * 220));