devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoría web

Animación de estrellas fugaces — Estrellas fugaces en CSS

Haz que estrellas fugaces crucen un cielo nocturno en el hero, o deja que figuras de estrella caigan y giren. Controla con qué frecuencia aparecen, la longitud de la estela, el ángulo y el color.

Actualizado el 


  


    
 Tus datos nunca salen de tu ordenador. Todo se procesa localmente en tu navegador.

    
    
    

      
Cómo usar: Estrellas fugaces
  1. La vista previa empieza con Estrellas fugaces. Pausa entre define con qué poca frecuencia aparece cada una.
  2. Define la longitud de la estela con Tamaño y el ángulo con Viento.
  3. Elige Estrellas que caen para figuras de estrella que se desplazan hacia abajo y giran.
  4. Copia el código en una sección oscura.
Estrellas fugaces con un solo keyframe
Una estrella fugaz es una línea de gradiente delgada —cola transparente, cabeza brillante— rotada hacia su dirección de movimiento. El keyframe la desplaza por la caja en la primera parte de su ciclo y la mantiene oculta el resto del tiempo, así cada estrella cruza con un destello y luego espera; distintos retrasos las reparten.
Más efectos están en el Generador de animación de partículas.
También se busca como: animación de estrellas fugaces css, estrella fugaz css, animación estrella fugaz, animación de meteoritos css, animación cielo nocturno css, efecto estrellas que caen, animación de estrellas css.
Herramientas que combinan con: Estrellas fugaces
  • Efecto de nieve CSS — Haz que nieve en tu web por las fiestas: nieve suave o copos, una ligera nevada o una ventisca.
  • Animación de lluvia CSS — Haz que llueva en una página o en la sección principal, desde una llovizna suave hasta un aguacero inclinado.
  • Confeti CSS — Celebra un lanzamiento, un registro o un cumpleaños con confeti cayendo que ondea y da vueltas en colores variados.
  • Generador de Keyframes CSS — Un editor visual para @keyframes.
Preguntas frecuentes
¿Cómo hago una animación de estrella fugaz en CSS?
Anima una línea de gradiente delgada en diagonal por la pantalla, rotada según su trayectoria, durante la primera parte del keyframe, y mantenla fuera de la vista el resto del tiempo. Elige Estrellas fugaces aquí y copia el código.
¿Cómo hago que aparezcan con menos frecuencia?
Aumenta Pausa entre y reduce Cuántas.
¿Puedo usar mi propia imagen de estrella?
Sí: elige Mi SVG / imagen y súbela, o Emoji y escribe una estrella.
¿Puedo instalar Estrellas fugaces como aplicación web y utilizarla sin conexión?
Sí. Estrellas fugaces es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.

      
    

    
    
Herramientas relacionadas
localGenerador de partículasAñade nieve, lluvia, estrellas fugaces, confeti, pétalos, hojas de otoño, corazones o burbujas que suben a…localEfecto de nieve CSSHaz que nieve en tu web por las fiestas: nieve suave o copos, una ligera nevada o una ventisca. Copia un…localAnimación de lluvia CSSHaz que llueva en una página o en la sección principal, desde una llovizna suave hasta un aguacero…localConfeti CSSCelebra un lanzamiento, un registro o un cumpleaños con confeti cayendo que ondea y da vueltas en colores…localGenerador de Keyframes CSSUn editor visual para @keyframes. Añade keyframes en una línea de tiempo, define transformaciones,…localGenerador de Gradientes CSSDiseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un…