sass动效星空

一、安装所需依赖 

cnpm install node-sass -save-dev

cnpm install sass-loader -save-dev

cnpm install -g sass

*用npm下载node-sass会失败报需要python环境，直接用cnpm下载就可以成功了

<template>
    <div class="star-content">
        <div class="star1"></div>
        <div class="star2"></div>
        <div class="star3"></div>
    </div>
</template>

<style lang="scss" scoped>
$starColor: #fff;
@function getStarShadow($n) {
  $shadow: '#{random(100)}vw #{random(100)}vh #{$starColor}';
  @for $i from 2 through $n {
    $shadow: '#{$shadow},#{random(100)}vw #{random(100)}vh #{$starColor}';
  }
  @return unquote($shadow);
}

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

.star-content {
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

@for $i from 1 through 3 {
  $shadNum: floor(500 / $i);
  $duration: floor(200 / $i);
  .star#{$i} {
    position: fixed;
    width: #{$i}px;
    height: #{$i}px;
    border-radius: 50%;
    left: 0;
    top: 0;
    box-shadow: getStarShadow($shadNum);
    animation: starMove #{$duration}s linear infinite;
    &::after {
      content: '';
      position: inherit;
      width: inherit;
      height: inherit;
      left: inherit;
      top: 100vh;
      border-radius: inherit;
      box-shadow: inherit;
    }
  }
}
</style>