Créer un arrière-plan animé avec HTML et CSS
L’ajout d’un arrière-plan animé à votre site web ou à votre application peut contribuer à une conception unique et intéressante. Les arrière-plans créatifs peuvent susciter des émotions et améliorer l’expérience de l’utilisateur.
Il existe de nombreuses façons de créer un arrière-plan animé pour votre application, mais une simple combinaison de HTML et de CSS fonctionne particulièrement bien. Découvrez cet exemple, apprenez comment fonctionne son code et assistez à une démonstration en direct de l’arrière-plan animé final.
Créer la structure HTML
Vous allez créer un arrière-plan de couleur bleue avec des bulles qui grandissent et flottent vers le haut. Vous pouvez voir le résultat final sur cette page Codepen.
Commencez par créer un section avec la classe enveloppe pour héberger l’animation.
Ensuite, créez 10 divs qui représenteront les bulles. À l’intérieur de chaque div, créez un span avec la classe dot. Vous pouvez apprendre ces balises HTML essentielles en 10 minutes si vous êtes novice en HTML.
Le style avec le code CSS
Vous pouvez créer des effets d’arrière-plan incroyables en utilisant uniquement le langage HTML. Mais pour ce projet, vous utiliserez le code CSS pour styliser et animer l’arrière-plan.
Tout d’abord, réglez la marge et l’espacement à 0 pour qu’il n’y ait pas d’espace autour de l’arrière-plan.
Il faut ensuite styliser la section parentale à l’aide de la classe « wrapper ». Cette section aura une largeur et une hauteur de 100 % pour remplir toute la page. Définissez sa couleur d’arrière-plan comme une nuance de bleu et donnez-lui une position absolue.
Attribuez également une position absolue à la section H1. Pour le placer au centre de la page, commencez par fixer sa position en haut à gauche à 50 %. Utilisez ensuite translate pour le déplacer vers le haut et vers la gauche, de sorte que son centre se trouve exactement au milieu.
Ensuite, stylisez les divs qui seront circulaires pour agir comme des bulles animées. Donnez à chaque div une hauteur, une largeur et une bordure. Le grand rayon de la bordure garantit que la bordure est un cercle. Définissez également une durée d’animation à l’aide de la propriété CSS animation.
Donnez aux points une hauteur et une largeur de 5px. Donnez aux points un rayon de bordure et un arrière-plan blanc. Positionnez chacun d’entre eux de manière absolue, près du coin supérieur droit de sa div parente.
Ensuite, utilisez le sélecteur nth-child pour positionner chaque div avec des paramètres différents. Vous pouvez nommer l’animation animer; vous la définirez plus tard à l’aide de @keyframes.
Utiliser nth-child(2) pour adresser le premier div puisque le premier enfant du div. wrapper est l’élément h1.
Vous pouvez donner aux divs inférieures des pourcentages plus élevés afin qu’elles s’élèvent vers le haut à des intervalles différents.
Utilisez les @keyframes pour modifier et faire pivoter progressivement les cercles et les points à différents intervalles. Dans le code suivant, les points tournent à 70 degrés et les cercles à 360 degrés. Cette rotation crée l’effet de bulle.
Vous pouvez rendre les arrière-plans plus élégants en utilisant des motifs CSS. Les motifs vous permettent de créer des vagues, des grilles, des feuilles et d’autres motifs pour vous aider à créer des animations étonnantes.
Vous pouvez animer de nombreuses propriétés à l’aide de CSS
Vous pouvez créer différents types d’animations à l’aide de CSS. Vous pouvez notamment modifier la couleur d’arrière-plan et retarder la durée d’exécution d’une animation.
Vous pouvez également définir la fréquence d’exécution d’une animation, jusqu’à l’infini. Vous pouvez également définir la direction dans laquelle l’animation doit se déplacer : vers l’avant ou vers l’arrière. Il est amusant de jouer avec les animations et vous pouvez les utiliser pour donner vie à vos applications.
