html, body {
 height: 100%;
}

body {
  min-height: 100%;
  overflow: hidden;
  background: black;
}

.wrap {
  position: relative;
  min-height: 100%;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 400px;
}

$size: 30;

.c {
  height: $size+px;
  width: $size+px;
  top: 50%;
  left: 50%;
  margin-top: -$size/2+px;
  margin-left: -$size/2+px;
  position: absolute;
  border-radius: 50%;
}


$r: 300;
$total: 150;
$t: 0;
$vt: .2;
$z: 0;
$vz: 10;

@for $i from 1 through $total {
  $x: -(sin($t * 3.6) * $r);
  $y: cos($t * 3.6) * $r;
  $hue: $i * (50/$total);
  .c:nth-child(#{$i}){
    background: hsla($hue, 100%, 50%, 1);
    transform: translate3d($x+px, $y+px, -$z+px);
    animation: anim#{$i} 4s infinite alternate ease-in-out;
    animation-delay: $i * .02s;
  }

  @keyframes anim#{$i}{
    34% {
      transform: translate3d($x*2+px, $y*2+px, -$z+px);
    }
    64% {
      transform: translate3d($x+px, $y+px, -$z+px);
    }
    100% {
      transform: translate3d($x*4+px, $y*4+px, -(abs($z)*4)+px);
    }
  }
  $t: $t + $vt;
  $z: $z + $vz;
}