html, body {
  height: 100%;
}
body {
  min-height: 100%;
  background: black;
  overflow: hidden;
}
.wrap {
  min-height: 100%;
  transform-style: preserve-3d;
  perspective: 600px;
}

$total: 100;
$size: 8;
$h: 0;
$z: -500;

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

@for $i from 1 through $total {
  $x: cos($i * .5) * 50;
  $y: sin($i * .5) * 50;
  $h: $h + 3;

  .c:nth-child(#{$i}) {
    animation: anim#{$i} 2s infinite;
    animation-delay: $i * -.02s;
    background: hsl($h, 100%, 50%);    
  }
  @keyframes anim#{$i}{
    60% {
      opacity: 1;
    }
    100% {
      transform: translate3d($x+px, $y+px, -$z+px);
      opacity: 0;
    }
  }
}