L’ajout d’un arrière-plan animé à votre site Web ou à votre application peut contribuer à un design unique et intéressant. Les arrière-plans créatifs peuvent susciter des émotions et améliorer l’expérience utilisateur.
Il existe de nombreuses façons de créer un arrière-plan animé pour votre application, mais une simple combinaison de HTML simple et de CSS fonctionne particulièrement bien. Découvrez cet exemple, découvrez comment fonctionne son code et regardez une démo en direct de l’arrière-plan animé final.
Table des matières
Créer la structure HTML
Vous allez créer un fond de couleur bleue avec des bulles qui grandissent et flottent vers le haut. Vous pouvez voir le résultat final là-dessus Codepen.
Commencez par créer une section avec le wrapper de classe 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 le point de classe. Vous pouvez apprendre ces balises HTML essentielles en 10 minutes si vous débutez en HTML.
<body>
<section class="wrapper">
<h1>Animated Background</h1>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
</section>
</body>
Style avec le code CSS
Vous pouvez créer des effets d’arrière-plan incroyables en utilisant uniquement du HTML. Mais pour ce projet, vous utiliserez CSS pour styliser et animer l’arrière-plan.
Tout d’abord, définissez la marge et le remplissage sur 0 pour garantir l’absence d’espace autour de l’arrière-plan.
* {
margin: 0;
padding: 0;
} Ensuite, stylisez la section parent à l’aide de la classe wrapper. Cette section aura une largeur et une hauteur de 100 % pour remplir la page entière. Définissez sa couleur d’arrière-plan sur une nuance de bleu et donnez-lui une position absolue.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
} Stylisez également le H1 avec une position absolue. Pour le placer au centre de la page, commencez par régler sa position en haut à gauche à 50 %. Utilisez ensuite la translation pour le déplacer vers le haut et vers la gauche, afin que son centre soit exactement au milieu.
.wrapper h1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
} 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 bordure garantit que la bordure est un cercle. Définissez également une durée d’animation à l’aide de la propriété d’animation CSS.
.wrapper div {
height: 60px;
width: 60px;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4s linear infinite;
} Stylisez les points avec une hauteur et une largeur de 5 pixels. Donnez aux points un rayon de bordure et un fond blanc. Positionnez chacun de manière absolue, près du coin supérieur droit de son div parent.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
} Ensuite, utilisez le sélecteur de nième enfant pour positionner chaque div avec des paramètres différents. Vous pouvez nommer l’animation animée ; vous le définirez plus tard en utilisant @keyframes.
Utilisez nth-child(2) pour adresser le premier div puisque le premier enfant de l’élément .wrapper est le h1.
.wrapper div:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8s linear infinite;
}.wrapper div:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3s linear infinite;
}
.wrapper div:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7s linear infinite;
}
.wrapper div:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9s linear infinite;
}
Vous pouvez donner aux divisions inférieures des pourcentages plus élevés afin qu’elles atteignent le sommet à différents intervalles.
.wrapper div:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5s linear infinite;
}.wrapper div:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8s linear infinite;
}
.wrapper div:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6s linear infinite;
}
.wrapper div:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10s linear infinite;
}
Utilisez @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. Cette rotation crée l’effet bulle.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
} Vous pouvez rendre les arrière-plans plus élégants à l’aide de modèles 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 en utilisant CSS. Il s’agit notamment de changer la couleur d’arrière-plan et de retarder l’exécution d’une animation.
Vous pouvez également définir la fréquence à laquelle une animation doit s’exécuter, même à l’infini. Vous pouvez également définir la direction dans laquelle l’animation doit se déplacer : avant ou arrière. C’est amusant de jouer avec les animations et vous pouvez les utiliser pour donner vie à vos applications.