<body>
  <div class='container'>
    <div class='bubbles'>
      
<span style='--i:11;'></span>
<span style='--i:12;'></span>
<span style='--i:14;'></span>
 <span style='--i:16;'></span>
<span style='--i:13;'></span>
<span style='--i:15;'></span>
<span style='--i:20;'></span>
<span style='--i:24;'></span>
<span style='--i:23;'></span>
<span style='--i:22;'></span>
<span style='--i:20;'></span>
<span style='--i:11;'></span>
<span style='--i:12;'></span>
<span style='--i:14;'></span>
 <span style='--i:16;'></span>
<span style='--i:13;'></span>
<span style='--i:15;'></span>
<span style='--i:20;'></span>
<span style='--i:24;'></span>
<span style='--i:23;'></span>
<span style='--i:22;'></span>
<span style='--i:20;'></span>
<span style='--i:11;'></span>
<span style='--i:12;'></span>
<span style='--i:14;'></span>
 <span style='--i:16;'></span>
<span style='--i:13;'></span>
<span style='--i:15;'></span>
<span style='--i:20;'></span>
<span style='--i:24;'></span>
<span style='--i:23;'></span>
<span style='--i:22;'></span>
<span style='--i:20;'></span>
<span style='--i:11;'></span>
<span style='--i:12;'></span>
<span style='--i:14;'></span>
 <span style='--i:16;'>

  </div>
</div>
</body>
*
{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  min-height:100vh;
  background: #0c192c;
  
}
.container{
  position:relative;
  width:100%;
    height:100vh;
  overflow:hidden;
}
.bubbles{
  position:relative;
  display:flex;
  
}
.bubbles span{
  position:relative;
width:20px;
  height:20px;
  background:#4fc3dc;
  margin:0 4px;
  border-radius:50%;
  box-shadow:0 0 0 10px #4fc3dc44,0 0 50px #4fc3dc,
    0 0 100px #4fc3dc;
  animation:animate 12s linear infinite;
animation-duration:calc(60s/var(--i))
  
}
.bubbles span:nth-child(even){
  background:#ff2d75;
  box-shadow:0 0 0 10px #4fc3dc44,
    0 0 50px #ff2d7544,
    0 0 100px #ff2d75;
}
@keyframes animate{
  0%{
   transform: translateY(100vh) scale(0);
  }
 100%{
   transform: translateY(-10vh) scale(1);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.