Create CSS Circle Animation Shadow Effect By #BKTutorial

Source Code:

<style>

body 

{ background:blueviolet; }

.abc

{

  position:absolute;

  left:50%;

  top:50%;

  transform:translate(-50%, -50%);

}

.dote-abc

{

  width:400px;

  height:300px;

  position:absolute;

  left:50%;

  top:50%;

  transform:translate(-50%, -50%);

}

.dote-abc:after

{

  content:'';

  position:absolute;

  width:20px;

  height:5px;

  border-radius:50%;

  background:#000;

  bottom:0;

  opacity:0.4;

  left:50%;

  animation:shadow 2s linear infinite;

}

.dote-abc:nth-child(2):after

{

  animation-delay:-0.4s;

}

.dote-abc:nth-child(3):after

{

  animation-delay:-0.8s;

}

.dote

{

  width:15px;

  height:15px;

  background:#CFF;

  left:50%;

  top:50%;

  border-radius:50%;

  position:absolute;

  animation:anim 2s linear infinite;

}

.dote-abc:nth-child(2) .dote

{

  animation-delay: -0.4s;

}

.dote-abc:nth-child(3) .dote

{

  animation-delay:-0.8s;

}

@keyframes anim {

  0% { transform-origin:100% 30%; }

  50%{ transform:rotate(360deg); transform-origin:200% 60%; }

  50.1% { transform:rotate(0); transform-origin:-500% 10%; }

  100% { transform:rotate(-360deg); transform-origin:-400% 30%; }

}

@keyframes shadow {

  0% {  }

  12.5% { transform:translate(50px) scale(0.6); }

  25% { transform:translate(120px); }

  37.5% { transform:translate(50px) scale(1.4); }

  50% { transform:translate(0px); }

  62.5% { transform:translate(-50px) scale(0.6); }

  75% { transform:translate(-120px); }

  87.5% { transform:translate(-50px) scale(1.4); }

  100% { transform:translate(0px); }

}

</style>

<div class="abc">

  <div class="dote-abc">

    <div class="dote"></div>  

  </div>

  <div class="dote-abc">

    <div class="dote"></div>  

  </div>

  <div class="dote-abc">

    <div class="dote"></div>  

  </div>

</div>

Output: