SOURCE

<div class="effect">
  <div class="ball01"></div>
  <div class="ball02"></div>
  <div class="ball03"></div>
  <div class="ball04"></div>
</div>

.effect{
  width:100vw;
  height:100vh;
  background:#fff;
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  margin:auto;
  -webkit-filter:contrast(10);
/*   -webkit-animation:rot 6s ease infinite; */
}
.ball01, .ball02, .ball03, .ball04{
  
  border-radius:50%;
  position:absolute;
  -webkit-filter:blur(5px);
   z-index:2;
}

.ball01{
  width:30px;
  height:30px;
  background:#467f96;
  top:20%;
  left:50%;
  -webkit-animation:ball_b 2s ease infinite;
}
.ball02{
  width:15px;
  height:15px;
  background:#6b7e88;
  top:10%;
  left:50%;
  -webkit-animation:ball_b 2s ease-out 0.2s infinite;
}
.ball03{
  width:20px;
  height:20px;
  background:#2782b9;
  top:20%;
  left:48%;
  -webkit-animation:ball_b 3s ease 0.4s infinite;
}
.ball04{
  width:100px;
  height:100px;
  background:#6f8088;
  left:calc(50% - 50px);
  top:calc(50% - 50px);
  z-index:1;
}
@-webkit-keyframes rot{
  100%{
    transform:rotate(360deg);
  }
}
@-webkit-keyframes ball_b{
  100%{
    top:50%;
    width:40px;
    height:40px;
  }
}
@-webkit-keyframes ball_r{
  100%{
    left:50%;
    top:50%;
    width:40px;
    height:40px;
  }
}
@-webkit-keyframes ball_l{
  100%{
    left:50%;
    top:50%;
    width:40px;
    height:40px;
  }
}