Apprenez à créer un arrière-plan animé avec des bulles uniquement en HTML et CSS pour donner un effet moderne et vivant à vos pages web.


Pourquoi ajouter un arrière-plan animé ?


Un site statique, c’est un peu comme un écran figé… ça marche, mais ça manque de vie.


Un arrière-plan animé permet de :

  • rendre une page plus immersive
  • améliorer le design sans alourdir le site
  • attirer l’attention sans distraire


Et bonne nouvelle :
pas besoin de JavaScript pour ça.


Comment fonctionne l’animation des bulles ?


Le principe est simple :

  1. créer plusieurs éléments HTML représentant les bulles
  2. les styliser en CSS
  3. utiliser @keyframes pour les faire monter
  4. varier tailles, positions et vitesses

Résultat : un effet fluide et léger.


---


Étape 1 : structure HTML


Colle ici la structure HTML :


<div class="bubbles">

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

</div>

Étape 2 : style CSS et animation


Colle ici le style CSS :

body {

  margin: 0;

  height: 100vh;

  background: linear-gradient(to bottom, <a href="/search.php?q=0f2027" class="hashtag">#0f2027</a>, <a href="/search.php?q=203a43" class="hashtag">#203a43</a>, <a href="/search.php?q=2c5364" class="hashtag">#2c5364</a>);

  overflow: hidden;

}



.bubbles span {

  position: absolute;

  bottom: -150px;

  width: 40px;

  height: 40px;

  background: rgba(255,255,255,0.2);

  border-radius: 50%;

  animation: rise 15s infinite ease-in;

}



.bubbles span:nth-child(1){ left: 10%; animation-duration: 12s; }

.bubbles span:nth-child(2){ left: 20%; animation-duration: 18s; width:60px; height:60px;}

.bubbles span:nth-child(3){ left: 35%; animation-duration: 10s;}

.bubbles span:nth-child(4){ left: 50%; animation-duration: 22s; width:25px; height:25px;}

.bubbles span:nth-child(5){ left: 65%; animation-duration: 16s;}

.bubbles span:nth-child(6){ left: 80%; animation-duration: 12s; width:50px; height:50px;}

.bubbles span:nth-child(7){ left: 90%; animation-duration: 20s;}



@keyframes rise {

  0% {

    transform: translateY(0) scale(1);

    opacity: 1;

  }

  100% {

    transform: translateY(-120vh) scale(0.5);

    opacity: 0;

  }

}


Ce que fait réellement l’animation


Le CSS :

  • positionne les bulles en bas de l’écran
  • les fait monter progressivement
  • réduit légèrement leur taille
  • ajoute de la transparence pour un effet naturel


Chaque bulle peut avoir :

  • une taille différente
  • une durée différente
  • une position différente


Ce qui donne un rendu naturel et non répétitif.


Astuces pour améliorer l’effet


Tu peux aller plus loin :

  • changer la couleur des bulles
  • ajouter un dégradé en arrière-plan
  • ralentir l’animation pour un effet zen
  • augmenter le nombre de bulles pour un effet aquarium


Où utiliser cet effet ?


Idéal pour :

  • pages d’accueil
  • landing pages
  • portfolios
  • pages de connexion
  • sites créatifs


L’effet reste léger et compatible avec tous les navigateurs modernes.


Conclusion


Un arrière-plan animé avec des bulles est l’un des effets CSS les plus simples à réaliser, mais aussi l’un des plus élégants.


Quelques lignes suffisent pour donner vie à une page entière.


Et le meilleur ?
Ton CPU ne souffre même pas.