How To Create Bubble Animated Background

In this topic we will learn how to create background animation with bubble effect

Step 1: Create a html file

• home.html

<div>
    <div class="bubble s1"></div>
    <div class="bubble s2"></div>
    <div class="bubble s3"></div>
    <div class="bubble s4"></div>
    <div class="bubble s5"></div>
    <div class="bubble s6"></div>
    <div class="bubble s7"></div>
    <div class="title">
      <h1>Background Bubbles</h1>
    </div>
</div>

Step 2: Create a CSS file , here we will add css for animation

• home.css

body { 
  background: #A9CCE3; 
  color: #000; 
  height: 100vh; 
  margin: 0; 
  padding: 0; 
  overflow-x: hidden; 
}
.bubble {
  border-radius: 50%;
  box-shadow: inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
  height: 150px;
  position: absolute;
  width: 150px;
}
.title {
  height:100vh;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
} 
@keyframes sideWays { 
 0% { margin-left:0px; } 
 100% { margin-left:50px; } 
} 
/* ANIMATIONS FOR INDIVIDUAL BUBBLE */
.s1 { 
  animation: sideWays 4s infinite alternate;  
  left: 5%; 
  top: 20%; 
  transform: scale(0.6); 
} 
.s2 { 
  animation: sideWays 2s infinite alternate; 
  left: 15%; 
  top: 60%; 
  transform: scale(0.4); 
} 
.s3 { 
  animation: sideWays 3s infinite alternate; 
  left: 25%; 
  top: 0%; 
  transform: scale(0.7); 
} 
.s4 { 
  animation: sideWays 3s infinite alternate; 
  left: 35%; 
  top: 40%; 
  transform: scale(0.3); 
} 
.s5 { 
  animation: sideWays 4s infinite alternate; 
  left: 50%; 
  top: 50%; 
  transform: scale(0.5); 
} 
.s6 { 
  animation: sideWays 2s infinite alternate; 
  left: 60%; 
  top: 20%; 
  transform: scale(0.8); 
} 
.s7 { 
  animation: sideWays 4s infinite alternate; 
  left: 75%; 
  top: 60%; 
  transform: scale(0.4); 
}

OUTPUT:-