Cette démo simple explique comment utiliser les animations CSS pour obtenir des effets visuels intéressants.
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.
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 un section avec la classe emballage pour héberger l'animation.
Ensuite, créez 10 divs qui représenteront les bulles. A l'intérieur de chaque div, créez un span avec la classe point. Tu peux apprenez ces balises HTML essentielles en 10 minutes si vous êtes nouveau en HTML.
<body>
<sectionclass="wrapper">
<h1>Animated Backgroundh1>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
section>
body>Style avec le code CSS
Vous pouvez créer des choses incroyables effets d'arrière-plan utilisant uniquement 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.
.wrapperh1 {
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.
.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}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 animer; vous le définirez plus tard en utilisant @keyframes.
Utiliser nième enfant (2) pour aborder le premier div depuis le premier enfant du .wrapper l'élément est le h1.
.wrapperdiv:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3slinearinfinite;
}.wrapperdiv:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7slinearinfinite;
}
.wrapperdiv:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9slinearinfinite;
}
Vous pouvez donner aux divisions inférieures des pourcentages plus élevés afin qu'elles atteignent le sommet à différents intervalles.
.wrapperdiv:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5slinearinfinite;
}.wrapperdiv:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6slinearinfinite;
}
.wrapperdiv:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10slinearinfinite;
}
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);
}
}Tu peux 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.