Créer un arrière plans animé avec des bulles rien qu'avec HTML et CSS
Hey les geeks! Aujourd'hui, nous allons vous montrer comment créer un background animé en utilisant uniquement HTML et CSS. C'est une excellente occasion de mettre en valeur vos compétences en matière de développement web.
Vous aimez les effets visuels sur votre site web? Ou avez-vous déjà utilisé CSS pour créer des animations? Si ce n'est pas le cas, cette leçon est pour vous!
Le HTML est un langage de balisage utilisé pour structurer les contenus d'une page web tandis que le CSS, quant à lui, est un langage qui permet de contrôler l'apparence visuelle d'une page web. En utilisant ces deux technologies, nous allons créer un background animé sur notre site web.
Pour commencer, nous allons créer une structure HTML de base comme vous le savez déjà.
Dans notre exemple, nous allons créer un effet de bulles qui vont du haut vers le bas.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-UA-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Nom de la page -->
<title> Background animattion </title>
<!-- Description -->
<meta name="description" content="Azend stream est l'avenir de l'informatique ...">
<meta name="keywords" content="Azend, Josue Mukaz, Azend-t">
<!-- Favicon et images -->
<!-- Styles Css -->
<link rel="stylesheet" href="test.css">
<style>
</style>
</head>
<body>
<div class="contenair">
<div class="bubbles">
<span style="--i:29;"></span>
<span style="--i:28;"></span>
<span style="--i:27;"></span>
<span style="--i:26;"></span>
<span style="--i:25;"></span>
<span style="--i:24;"></span>
<span style="--i:23;"></span>
<span style="--i:22;"></span>
<span style="--i:21;"></span>
<span style="--i:20;"></span>
<span style="--i:19;"></span>
<span style="--i:18;"></span>
<span style="--i:17;"></span>
<span style="--i:16;"></span>
<span style="--i:15;"></span>
<span style="--i:14;"></span>
<span style="--i:13;"></span>
<span style="--i:12;"></span>
<span style="--i:11;"></span>
<span style="--i:10;"></span>
<span style="--i:9;"></span>
<span style="--i:8;"></span>
<span style="--i:7;"></span>
<span style="--i:6;"></span>
<span style="--i:5;"></span>
<span style="--i:4;"></span>
<span style="--i:3;"></span>
<span style="--i:2;"></span>
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<span style="--i:5;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
<span style="--i:8;"></span>
<span style="--i:9;"></span>
<span style="--i:10;"></span>
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:13;"></span>
<span style="--i:14;"></span>
<span style="--i:15;"></span>
<span style="--i:16;"></span>
<span style="--i:17;"></span>
<span style="--i:18;"></span>
<span style="--i:19;"></span>
<span style="--i:20;"></span>
<span style="--i:21;"></span>
<span style="--i:22;"></span>
<span style="--i:23;"></span>
<span style="--i:24;"></span>
<span style="--i:25;"></span>
<span style="--i:26;"></span>
<span style="--i:27;"></span>
<span style="--i:28;"></span>
</div>
</div>
</body>
</html>
CSS
Placez ceci dans les balises style qui se situent dans le head de la page
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #000;
}
.contenair{
min-width: 100%;
width: 100%;
height: 100vh;
overflow: hidden;
}
.bubbles{
position: relative;
display: flex;
}
.bubbles span{
position: relative;
width: 10px;
height: 10px;
background: rgba(134,255,0.1);
box-shadow: 0 0 20px rgba(134,255,0.1),
0 0 40px rgba(134,255,0.1),
0 0 60px rgba(134,255,0.1),
0 0 80px rgba(134,255,0.1),
0 0 8px rgba(134,255,1);
border-radius: 50%;
margin: 0 4px;
animation: animate 15s linear infinite;
animation-duration: calc(110s/var(--i));
}
.bubbles span:nth-child(even){
background: #0080ff;
border-radius: 50%;
box-shadow: 0 0 20px #4fc3dc44,
0 0 40px #4fc3dc,
0 0 60px #4fc3dc,
0 0 80px #4fc3dc,
0 0 8px 4fc3dc;
margin: 0 4px;
}
@keyframes animate {
0%{
transform: translateY(-10vh) scale(1);
}
100%{
transform: translateY(100vh) scale(0);
}
}
😃😃Et voilà, vous avez maintenant créé un background animé sur votre site web en utilisant uniquement HTML et CSS! C'est une compétence précieuse à ajouter à votre portfolio et à votre expertise en développement web. N'hésitez pas à essayer différentes animations pour donner vie à votre site web. Surtout laisser un commentaire et laisser un like si ça vous a plu.
