Termes CSS clés employés : linear-gradient, radial-gradient, animation.
Compatibilité navigateurs : IE10+, Firefix22.0+, Chrome28.0+, Safari5.1+ avec préfixe, Opera16+.
Réaliser un petit dessin animé d’un poisson faisant des bulles.
Disposer du fond (l’eau) et des bulles est facile à l’aide de dégradés, linéaires ou radiaux. Pour le poisson, nous employerons une image à fond transparent (.png ou .gif comme ici). Une animation se chargera du mouvement des divers éléments.
Le code HTML est encore une fois réduit au minimum :
<DIV class=conteneur>
<DIV class=bulle ></div>
</div>
Commençons par définir les caractéristiques de la propriété background-image. En allant
comme d’habitude du fond vers le haut, nous aurons un dégradé linéaire pour le fond, les bulles (ici cinq, avec des tailles variables) et l’image du poisson :
background-image:
url(poisson.gif),
radial-gradient(circle, rgba(255,255,255,0) 0px,
rgba(255,255,255,.15) 5px, rgba(255,255,255,.3) 6px,
rgba(255,255,255,0) 7px),
radial-gradient(circle, rgba(255,255,255,0) 0,
rgba(255,255,255,.15) 3px, rgba(255,255,255,.3) 4px,
rgba(255,255,255,0) 5px),
radial-gradient(circle, rgba(255,255,255,0) 0,
rgba(255,255,255,.15) 5px, rgba(255,255,255,.3) 6px,
rgba(255,255,255,0) 7px),
radial-gradient(circle, rgba(255,255,255,0) 0,
rgba(255,255,255,.15) 5px, rgba(255,255,255,.3) 6px,
rgba(255,255,255,0) 7px),
radial-gradient(circle, rgba(255,255,255,0) 0,
rgba(255,255,255,.15) 2px, rgba(255,255,255,.3) 3px,
rgba(255,255,255,0) 4px),
linear-gradient(180deg, rgba(150,150,200,1) 0%,
rgba(100,100,200,1) 100%);
Remarquez que les bulles sont de tailles différentes. Nous allons en tenir compte lors de la définition de
la taille des dégradés. La taille de l’image est évidente, les bulles sont situées dans une bande de
largeur variable haute comme l’élément.
background-size: 50px 50px, 15px 100%,10px 100%,
15px 100%,10px 100%,7px 100%, 100% 100%;
Nous définissons ensuite la position initiale de chaque arrière-plan, et interdisons toute répétition :
background-position: -40px 50%, -10px 0px, -10px 0px,
-10px 0px, -10px 0px, -10px 0px, 0% 0%;
background-repeat:no-repeat;
Remarquez que nous « masquons » les bulles derrière le poisson, puisqu’elles sont dessinées avant lui. Puis nous définissons l’animation, comme devant être de type linéaire et se répéter à l’infini :
animation: bulles1 5s linear infinite;
Enfin, l’animation proprement dite : les bulles doivent apparaître aux différentes étapes, et remonter alors vers la surface à vitesse variable en gardant la même position horizontale. Tant qu’une bulle ne doit pas apparaître, nous la déplaçons comme le poisson :
@keyframes bulles1
{ from { background-position: -40px 50%, -10px 0px, -10px 0px,
-10px 0px, -10px 0px, -10px 0px, 0% 0%;}
20%{ background-position: 30px 50%, 40px 0px, 45px -30px,
45px 0px, 45px 0px, 45px -10px, 0% 0%;}
40% { background-position: 70px 50%, 80px 0px, 45px -50px,
90px 0px, 95px 0px, 45px -30px, 0% 0%;}
60% { background-position: 110px 50%, 80px -40px, 45px -70px,
130px 0px, 135px -20px, 45px -50px, 0% 0%;}
80% { background-position: 170px 50%, 80px -120px, 45px -90px,
190px 0px, 150px -100px, 45px -70px, 0% 0%;}
to { background-position: 190px 50%, 80px -200px, 45px -110px,
190px -150px, 135px -180px, 45px -105px, 0% 0%;}
}
|
|---|