%div.wrap
  -300.times do
    %div.c

$total: 300;
$size: 3px;
$time: 8s;
$hue: 160;

html, body, .wrap {
  height: 100%;
}

body {
  background: black;
  overflow: hidden;
}

.wrap {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  transform: rotateX(-20deg);
}

.c {
  position: absolute;
  height: $size;
  width: $size;
  left: 50%;
}

@for $i from 1 through $total {
  $deg: $i * 20deg;
  $x: 100px - ($i * (100/$total));
  $y: $i * (100vh/$total);
  $z: ($total - $i) * .5px;
  $hue: $hue + 2;
  .c:nth-child(#{$i}){
    transform: rotateY(0) translate3d(0, random(100) * 1vh, 0);
    animation: anim#{$i} $time infinite linear alternate;
    background: hsla($hue, 100%, 50%, 1);
    animation-delay: $i * .008s;
    opacity: 0;
  }
  @keyframes anim#{$i}{
    20% {
      transform: rotateY($deg) translate3d($x, $y, $z);
      opacity: 1;
    }
    80% {
      transform: rotateY($deg + 720) translate3d($x, $y, $z);
      opacity: 1;
    }
    100% {
      transform: rotateY($deg + 720) translate3d($x * 30, $y, $z);
    }
  }
}