scss如何实现星空效果

<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
<div class="layer_title">Sass 星空</div>

//三个layer1，2，3代表三层星星

@function getShadows($n){

  $shadows: "#{random(100)}vw #{random(100)}vh #fff";

  @for $i from 2 through $n {
    $shadows: "#{$shadows}, #{random(100)}vw #{random(100)}vh #fff";

  }
  
  @return unquote($shadows);

}

$duration: 200s;
$starCount: 1000;

@for $i from 1 through 3 {
  $duration: $duration / 2;
  $starCount: floor($starCount / 2);
  .layer#{$i}{
    $size: #{$i}px;
    position: fixed;
    width: $size;
    height: $size;
    border-radius: 50%;
    background: #f00;
    left: 0;
    top: 0;
    box-shadow: getShadows($starCount);
    animation: move $duration linear infinite;
    &::after{            //after是为了实现无限移动，底部多加复制一屏
      content: '';
      position: fixed;
      left: 0;
      top: 100vh;
      width: $size;
      height: $size;
      border-radius: inherit;
      box-shadow:inherit
    
    }
    
  }

}

@keyframes move {
  100%{
    transform: translateY(-100vh);
  }
}