Comment utiliser : Générateur de particules
- Choisissez un effet — et cliquez sur + Ajouter un calque pour en empiler d'autres (par exemple neige et étoiles filantes) ; retirez un calque avec son ×. Effets : neige, flocons, pluie, étoiles filantes, étoiles qui tombent, confettis, pétales, feuilles, cœurs, bulles — ou Mon SVG / image pour importer le vôtre, ou Emoji.
- Ajustez le nombre, la taille, la vitesse, le vent et le balancement. Pause entre fait apparaître les particules de temps à autre, comme des étoiles filantes.
- Choisissez si l'effet couvre la page entière (superposition fixe) ou une section.
- Copiez le HTML + CSS (sans JavaScript) ou la version JavaScript plus courte, ou téléchargez une page de démonstration.
Comment fonctionne l'animation
Chaque particule est un élément <i> doté de sa propre taille, de sa position de départ, de sa durée et de son délai, stockés dans des propriétés personnalisées CSS. Une seule règle @keyframes la déplace depuis au-dessus du bord supérieur jusqu'en dessous du bord inférieur ; un <b> interne se balance de gauche à droite et tourne. Seule la propriété transform est animée, donc le navigateur l'exécute sur le GPU sans recalculer la mise en page.
.dp-fall { position: fixed; inset: 0; overflow: hidden; pointer-events: none; container-type: size; }
.dp-fall i { position: absolute; top: 0; animation: dp-fall var(--d) linear var(--t) infinite; }
@keyframes dp-fall { to { transform: translate(var(--dx), calc(100cqh + var(--s) * 3)); } }Les délais négatifs font démarrer chaque particule au milieu de sa chute, si bien que l'écran est déjà rempli au chargement de la page. pointer-events: none laisse passer les clics, et prefers-reduced-motion masque l'effet pour les visiteurs ayant désactivé les animations.
Utiliser votre propre SVG
Choisissez Mon SVG / image et importez un petit SVG, PNG, WebP ou GIF : un logo, un flocon, une pièce. Il est intégré au CSS sous forme de data URI, donc l'extrait n'a toujours besoin d'aucun fichier supplémentaire. Les formes intégrées sont dessinées avec un masque CSS, ce qui permet à Couleurs mélangées de recolorer chacune d'elles.
Voir aussi : CSS Keyframes Generator, CSS Animation Generator, SVG Blob Generator.
Aussi recherché comme : générateur animation particules, effet particules css, effet neige css, animation neige css, animation pluie css, étoiles filantes css, animation confettis css, animation feuilles qui tombent.
Outils complémentaires : Générateur de particules
- Générateur de vagues SVG — Concevez des séparateurs de sections ondulés pour vos pages d'accueil : ajoutez ou retirez des vagues (jusqu'à 6, chacune avec sa couleur, son opacité et sa forme), réglez le nombre de crêtes, la hauteur et le lissage, choisissez les couleurs et placez la vague en haut ou en bas.
- Générateur de loader CSS — Choisissez parmi 13 spinners de chargement en CSS pur, ajustez la taille, les couleurs, l’épaisseur et la vitesse, puis copiez un HTML et un CSS légers et accessibles — sans image, SVG ni JavaScript.
- Générateur de dégradé CSS — Concevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, partez d’un préréglage, puis copiez un CSS prêt pour la production avec une couleur de repli unie.
- Générateur d'animations CSS au survol — Concevez des animations au survol pour boutons, cartes, liens et icônes.