Хвіст зірки

<div class="star-trail">
  <div class="star-trail__dot"></div>
  <div class="star-trail__glow"></div>
  <div class="star-trail__tail"></div>
</div>

<style>
.star-trail { position: relative; height: 180px; background: radial-gradient(circle at 20% 30%, #1e3a8a, #0b1021 70%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; }
.star-trail__dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fbbf24; top: 50%; left: -10%; animation: shoot 2.4s ease-in-out infinite; box-shadow: 0 0 18px rgba(251, 191, 36, 0.8); }
.star-trail__glow { position: absolute; top: 50%; left: -10%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: radial-gradient(circle, rgba(251, 191, 36, 0.28), transparent 70%); animation: fadeGlow 2.4s ease-in-out infinite; }
.star-trail__tail { position: absolute; top: 50%; left: -10%; width: 280px; height: 4px; margin-top: -2px; background: linear-gradient(90deg, rgba(251, 191, 36, 0.65), transparent 70%); animation: stretch 2.4s ease-in-out infinite; }
@keyframes shoot { 0% { transform: translateX(0) translateY(0) scale(0.9); opacity: 0; } 10% { opacity: 1; } 50% { transform: translateX(320px) translateY(-12px) scale(1.1); opacity: 1; } 100% { transform: translateX(520px) translateY(-18px) scale(0.9); opacity: 0; } }
@keyframes fadeGlow { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 0.9; } 60% { transform: translateX(320px); opacity: 0.5; } 100% { transform: translateX(520px); opacity: 0; } }
@keyframes stretch { 0% { transform: translateX(0) scaleX(0.4); opacity: 0; } 15% { opacity: 0.9; } 50% { transform: translateX(240px) scaleX(1); opacity: 1; } 100% { transform: translateX(440px) scaleX(0.4); opacity: 0; } }
</style>