Sass 星空（Sass + keyframes 实现星空动画）

[1. 准备](#1. 准备)
[2. 代码](#2. 代码)
[3. 扩展（颜色渐变）](#3. 扩展（颜色渐变）)

Sass 星空

1. 准备

如上图所示，我们将用sass来实现一个星空运动的效果。

为了实现方便，我这里直接使用 vue3 + sass 的方式实现。

当然，你不用 vue3 或者其他框架，或者直接使用 sass 都无所谓，这不是重点。重点是使用 sass 实现动画效果。

（1）创建vue3项目：

shell 复制代码

pnpm create vue@latest

按照需求输入项目名称（比如 sass-star）和选择需要下载的包。

（2）下载依赖：

shell 复制代码

cd sass-star
pnpm i

（3）下载 sass 相关依赖

shell 复制代码

pnpm i sass sass-loader

（4）运行项目

shell 复制代码

pnpm dev

（5）修改全局样式 src/assets/main.css：

css 复制代码

* {
  margin: 0;
  padding: 0;
}
#app{
  width: 100vw;
  height: 100vh;
}

2. 代码

App.vue：

javascript 复制代码

<template>
  <div class="sky">
    <div class="layer1"></div>
    <div class="layer2"></div>
    <div class="layer3"></div>
    <div class="layer4"></div>
    <div class="layer5"></div>
    <div class="title">Sass 星空</div>
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.sky {
  width: 100%;
  height: 100%;
  background-color: black;
}

.title {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  letter-spacing: 10px;
  font-size: 40px;
  font-weight: bold;
  // 渐变文字效果
  background: linear-gradient(#fff, #000);
  /* 关键属性：背景裁剪为文字 */
  background-clip: text;
  -webkit-background-clip: text;
  /* 文字颜色透明以显示渐变背景 */
  color: transparent;
  /* 兼容性处理 */
  -webkit-text-fill-color: transparent;
  display: inline-block;
  
}

// 生成随机位置阴影效果（其实就是某一个layer的指定数目但位置随机的分身）
@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: 400s;
$count: 1000;

@for $i from 1 through 5 {
  // 每一层动画时长减半，星星数目减半
  $duration: $duration / 2;
  $count: floor($count / 2);

  .layer#{$i} {
    $size: #{$i}px;
    position: fixed;
    width: $size;
    height: $size;
    border-radius: 50%;
    left: 0;
    top: 0;
    background: #f40;
    box-shadow: getShadows($count);
    animation: moveUp $duration infinite linear;

    // 设置伪元素，形成两个屏幕高度的动画效果，从而实现无缝衔接
    &::after {
      content: '';
      position: fixed;
      left: 0;
      top: 100vh;
      border-radius: inherit;
      width: inherit;
      height: inherit;
      box-shadow: inherit;
    }
  }
}

// 动画效果
@keyframes moveUp {
  to {
    transform: translateY(-100vh);
  }
}
</style>

3. 扩展（颜色渐变）

（1）中心向外放射性渐变：

css 复制代码

background: radial-gradient(#fff, #000);

（2）使用多个颜色

css 复制代码

background: linear-gradient(to right,#e66465, #9198e5, #3baffe);

（3）修改渐变方向

css 复制代码

background: linear-gradient(to right,#e66465, #9198e5, #3baffe);

我感觉这个效果不错