html { background:black; overflow:hidden; }

.container {
  position:relative;
  left:50%; top:50vh; 
}

.star {
  position:absolute;
  transform-origin:center top;
  border-radius:50%;
}

.exploder{
  width:1em;
  height:.5em;
  border-radius:50%;
  opacity:.5;
  margin:0 auto;
  transform-origin:center top;
  transform-style: preserve-3d(5, 10)
}


@for $i from 1 through 50 {
  .star:nth-of-type(#{$i}) {
  $color: ($i - 1) * 360/30;
  transform:rotate(#{$i *60}deg);
  .exploder {
  background: hsla($color + ($i * 5),       100%, 50%, .6);
  -webkit-animation-delay: 2s; 
  animation-delay: 2s;
  animation:explode 2s infinite #{$i *         50}ms ease-in-out;
  -webkit-animation:explode 2s infinite #{$i   * 50}ms ease-in-out;
    }
  }
}

@keyframes explode {
  0% { transform: scale(0); }
  100% { transform: scale(15,30);}
}