CSS-Zone
Un efecto de destello suave para fondos o escenas tematicas. Ejemplo practico para efectos decorativos y acentos visuales con vista previa en vivo, estructura HTML y CSS listo para produccion que puedes integrar rapidamente.
Vista previa
HTML + CSS
<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>
Star trail es un patron reutilizable de animacion CSS que puede integrarse en interfaces modernas sin dependencias externas. El ejemplo incluye estructura HTML y estilos de movimiento faciles de escalar para componentes de produccion.
Usa este efecto para indicar estado, reforzar el foco visual o anadir microinteracciones ligeras que apoyen la claridad del contenido. El movimiento debe reforzar la jerarquia, asi que manten velocidad, contraste y densidad alineados con los objetivos de tu interfaz.
Copia el snippet, adapta espaciado y tiempos a los tokens de tu sistema y prueba el comportamiento en moviles y dispositivos de bajo consumo. Anade soporte para reduced-motion para mantener el componente accesible sin perder su funcion.