body{
  background: #000;
  overflow: hidden;
}
.rap{
  position: absolute;
  top: 50%;
  left: 50%;
}
@for $i from 1 through 100{ 
  .dots:nth-child(#{$i}){
    transform: rotate($i*3.6deg) rotateX(45deg) rotateY(45deg) translateY(-20px);
  
&:nth-child(odd):before,
&:nth-child(even):before{
  content:'';
  width: 20px;
  height: 20px;
  background: adjust-hue(#f00, $i*50%);
  box-shadow: 0 0 10px #000 inset;
  position: absolute;
  transform: scale(.1) skew(45deg);
  animation: dots 5s linear infinite;
  animation-delay: $i*-.75s;
  }
&:nth-child(even):before{
  background: adjust-hue(#ff0, $i*50%);
  }
}
@keyframes dots{
   100%{transform: scaleX(2) scaleY(1.5) translateY(100px);
    opacity: .02;
    }
  }
}