scss 实现星星效果

前言

这个是无意间看到b站的一个视频，发现挺好的，css实现本身还不吃太高的配置，视频链接如下：

【Sass实现星空效果【渡一教育】】

教程中使用了scss的除法运算法，但是这个用法在新版本中已经弃用了，现在推荐使用math语法，如果你的scss版本是新版本的，比如1.77.1，使用这种方式会报错。

教程

配置Math语法支持

在vite的scss中配置如下;

// vite.config.ts

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use 'sass:math';
          @import "@/styles/variables.scss";
          @import "@/styles/mixins.scss";
          `
      }
    }
  },
});

在全局最开头的位置增加：@use 'sass:math';引入。

然后我们就可以在之后的scss文件中放心使用math语法了。

星星scss

// stars.scss
@function stars-box-shadow($count) {
    $shadow: "";

    @for $i from 1 through $count {
        @if $i ==1 {
            $shadow: "#{random(100)}vw #{random(100)}vh #B3B3B3";
        } @else {
            $shadow: "#{$shadow}, #{random(100)}vw #{random(100)}vh #B3B3B3";
        }
    }

    @return unquote($shadow);
}

@keyframes stars-animation {
    to {
        transform: translateY(-100vh);
    }
}

.stars-bg {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(#001d3d, #000);
}

$stars-duration: 400;
$stars-count: 1000;

@for $i from 1 through 5 {
    $size: #{$i}px;
    $stars-duration: math.div($stars-duration, 2);
    $stars-count: floor(math.div($stars-count, 2));
    .stars-#{$i} {
        position: fixed;
        top: 0;
        left: 0;
        width: $size;
        height: $size;
        border-radius: 50%;
        box-shadow: stars-box-shadow($stars-count);
        animation: stars-animation #{$stars-duration}s linear infinite;
        background-color: #fff;

        &::after {
            content: "";
            position: fixed;
            top: 100vh;
            left: 0;
            width: inherit;
            height: inherit;
            border-radius: inherit;
            box-shadow: inherit;
        }
    }
}

.stars-bg用于给星星增加一个星空的渐变背景。

需要的HTML元素：

<div class="stars-bg">
  <div class="stars-1"></div>
  <div class="stars-2"></div>
  <div class="stars-3"></div>
  <div class="stars-4"></div>
  <div class="stars-5"></div>
</div>

效果图

image.gif