Animation d'étoiles filantes — Étoiles filantes en CSS

Faites traverser à des étoiles filantes un héros de ciel nocturne, ou laissez des formes d'étoiles descendre en tournoyant. Contrôlez leur fréquence, la longueur de la traînée, l'angle et la couleur.

Mis à jour le

Vos données ne quittent jamais votre ordinateur. Tout le traitement se fait localement dans votre navigateur.

Comment utiliser : Animation d'étoiles filantes

  1. L'aperçu démarre avec des Étoiles filantes. Pause entre définit la rareté d'apparition de chacune.
  2. Réglez la longueur de la traînée avec Taille et l'angle avec Vent.
  3. Choisissez Étoiles qui tombent pour des formes d'étoiles qui dérivent vers le bas et tournent.
  4. Copiez le code dans une section sombre.

Des étoiles filantes avec une seule image clé

Une étoile filante est une fine traînée en dégradé — queue transparente, tête lumineuse et brillante — pivotée selon sa direction de déplacement. L'image clé la fait traverser la zone pendant la première partie de son cycle, puis la garde masquée le reste du temps : chaque étoile passe en un éclair puis attend. Des délais différents les répartissent dans le temps.

D'autres effets sont disponibles dans le Générateur d'animation de particules.

Aussi recherché comme : animation étoiles filantes, étoile filante css, animation étoile filante css, animation météore css, animation ciel nocturne css, effet étoile filante, animation étoiles css, étoiles qui tombent css.

Outils complémentaires : Animation d'étoiles filantes

  • Effet neige CSS — Faites neiger votre site pour les fêtes : neige douce ou flocons, légères bourrasques ou tempête.
  • Animation pluie CSS — Faites pleuvoir sur une page ou une section héros, d'une fine bruine à une averse inclinée.
  • Confettis CSS — Célébrez un lancement, une inscription ou un anniversaire avec des confettis qui tombent, qui virevoltent et tournoient en couleurs variées.
  • Générateur Keyframes CSS — Un éditeur visuel pour @keyframes.

Questions fréquentes

Comment créer une animation d'étoile filante en CSS ?
Animez une fine ligne en dégradé en diagonale à travers l'écran, pivotée selon sa trajectoire, pendant la première partie de l'image clé, et gardez-la hors champ le reste du temps. Choisissez Étoiles filantes ici et copiez le code.
Comment les rendre moins fréquentes ?
Augmentez Pause entre et diminuez Nombre.
Puis-je utiliser ma propre image d'étoile ?
Oui — choisissez Mon SVG / image et importez-la, ou Emoji et saisissez une étoile.
Puis-je installer Animation d'étoiles filantes en tant qu’application web et l’utiliser hors ligne ?
Oui. Animation d'étoiles filantes est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.

Outils similaires