Afin d’ajouter un fond animé à vos sites on peut être tenté d’utiliser une vidéo animée en boucle. Ce qui, en terme de poids, n’est pas idéal. Surtout si c’est juste pour faire des mouvements simples et abstraits.
Il est aussi possible de réaliser des animations en full CSS assez facilement, que ce soit avec des formes simples, ou des formes un peu plus complexes.
Je vous propose aujourd’hui ce petit générateur de fonds animés en CSS avec 3 démos. Simple à prendre en main, et comme d’habitude vous n’aurez qu’à copier coller le code dans votre projet.
L’avantage de cette solution c’est que vous pourrez vous même modifier les formes très facilement comme par exemple y mettre des formes en SVG si vous poussez un peu la chose.
Le générateur de fonds animés en CSS
5 commentaires On Un générateur de fonds animés en CSS
Merci
Bonjour barbu et bonne année !
Est-il possible d’appliquer ce fond dans un div ?
Donc sans toucher au body, et sans position fixed ?
Merci pour ton aide 😉
Hello, oui bien sûr, c’est d’ailleurs déjà le cas dans la démo. Si tu cliques à gauche sur « Show » dans la partie Code tu verras qu’il est appliqué sur un div.
Bonjour,
j’ai mis le fond animé sur mon code html et css mais on ne voit plus mon texte. Comment faire pour que le texte soit par-dessus le fond?
Hello, ça dépend de ton code, mais tu peux essayer avec la propriété z-index https://developer.mozilla.org/fr/docs/Web/CSS/z-index