Meteors

Pluie de meteores animes avec queue lumineuse. Ideal pour les hero backgrounds.

autoCSSbackgroundparticleshero

Trigger: Automatique (boucle)

CSS requis: Non

Difficulte: easy

Preview live

Code

{Array.from({ length: 15 }).map((_, i) => (
  <div key={i} style={{
    position: "absolute",
    top: `${Math.random() * 60}%`,
    left: `${Math.random() * 100}%`,
    width: `${Math.random() * 80 + 40}px`,
    height: "1px",
    background: "linear-gradient(to right, #E1FF6C, transparent)",
    transform: "rotate(215deg)",
    animation: `meteor ${Math.random() * 3 + 2}s linear ${Math.random() * 5}s infinite`,
  }} />
))}

CSS requis

@keyframes meteor {
  0% { transform: rotate(215deg) translateX(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: rotate(215deg) translateX(-500px); opacity: 0; }
}

Instructions

Chaque meteore est un div 1px avec un gradient. Le rotate (215deg) donne l'angle de chute. Les durees et delays aleatoires creent un effet naturel. Le parent doit etre position: relative + overflow: hidden.