style.scss

@import 'functions.scss';

html,
body {
   width: 100%;
   height: 100%;
   margin: 0;
}

#sky {
   width: 100%;
   height: 100%;
   background-color: black;
}

.star {
   opacity: 0;
   position: absolute;
   background: white;
   box-shadow: 0px 0px 20px 0px rgb(255, 255, 255);
   border-radius: 100%;
   transform-origin: 0, 0;
   animation-timing-function: linear, linear !important;
   animation-iteration-count: infinite, infinite !important;
   animation-delay: -30s, -30s !important;
}

.size-1 {
   width: 1px;
   height: 1px;
}

.size-2 {
   width: 2px;
   height: 2px;
}

@for $i from 1 to 361 {
   $t: random(40000) + 5000;
   $angle: $i - reminder($i, 4);

   .axis-#{$i} {
      animation: anim#{$angle} #{$t}ms, fade#{random(10)} #{$t}ms;
   }
}

@for $i from 1 to 11 {
   $start: random(20);
   $end: $start + 10;
   @keyframes fade#{$i} {
      #{$start + '%'} {
         opacity: 0;
      }
      #{$end + '%'} {
         opacity: 1;
      }
      100% {
         opacity: 1;
      }
   }
}

@for $i from 1 to 91 {
   $a: $i * 4;
   @keyframes anim#{$a} {
      $angle: $pi * 2 * ($a / 360);
      $y: 80 * sin($angle);
      $x: 80 * cos($angle);
      100% {
         transform: translate(#{$x}vw, #{$y}vh);
      }
   }
}