css预编译器实现星空背景图

打造梦幻星空背景：用CSS预处理器轻松实现动态效果

星空背景能为网页增添神秘感和视觉吸引力。通过CSS预处理器（如Sass/Less）可以高效实现可定制化的星空效果，避免重复编写纯CSS代码。以下是 Vue3 组件皮肤具体实现方法和代码示例。

核心实现原理

利用Sass / Less 的循环和随机函数生成多个星体元素，通过CSS动画实现移动效果。关键点在于：

使用@for循环批量生成星体
random()函数控制大小、位置和动画延迟
CSS3的animation和transform实现动态效果

Sass代码实现

scss 复制代码

// 核心
.starlit-sky-bgk {
  height: 100%;
  width: 100%;
  // background-color: #000;
  background: linear-gradient(to bottom, #000033, #001144);
}

@function star($n) {
  //1 产生随机数
  // @return '#{random(100)}vw';
  $result: '#{random(100)}vw #{random(100)}vh 0 #fff';
  //2 批量生产随机 阴影 循环拼接
  @for $i from 2 through $n {
    $result: '#{$result},#{random(100)}vw #{random(100)}vh 0 #fff';
  }
  // 最初返回值都是字符串 不能识别  需要处理   unquote() 方法除去字符串引号
  @return unquote($result);
}

// 循环 步骤 增加层次感
$n: 5; // 有几层
$defaultT: 600s; // 默认时间多少秒
$starQuantity: 1000; // 星星数量

@for $i from 1 through $n {
  $defaultT: calc($defaultT / 2);
  $starQuantity: floor(calc($starQuantity / 2));
  .layer-#{$i} {
    position: fixed;
    top: 0;
    left: 0;
    width: #{$i}px;
    height: #{$i}px;
    border-radius: 50%;
    // background-color: #fff;
    box-shadow: star($starQuantity);
    animation: moveUp $defaultT linear infinite;
    // 移动后会造成空白和重复回显的卡顿 处理可以拼一份同样的星空就行
    &::after {
      content: '';
      top: 90vh;
      left: 0;
      position: inherit;
      width: inherit;
      height: inherit;
      border-radius: inherit;
      box-shadow: inherit;
    }
  }
}

// 移动动画
@keyframes moveUp {
  to {
    transform: translateY(-90vh);
  }
}

HTML结构

html 复制代码

<template>
  <div class="starlit-sky-bgk">
    <div class="layer-1"></div>
    <div class="layer-2"></div>
    <div class="layer-3"></div>
    <slot name="content"></slot>
    <div class="layer-4"></div>
    <div class="layer-5"></div>
  </div>
</template>

浏览器兼容说明

现代浏览器支持所有特性
旧版浏览器需添加-webkit-前缀
对性能敏感的页面可减少$star-count

实际应用案例

（此处插入实际效果截图）

这种技术适用于：

作品集封面背景
天文类网站主题
游戏界面装饰
节日主题页面

扩展建议

结合JavaScript动态调整星体数量
添加交互效果（如鼠标悬停时星体放大）
使用CSS变量实现主题切换（日间/夜间模式）
与WebGL结合实现3D星空效果

通过Sass预处理器，开发者可以轻松管理大型星空项目的样式代码，快速调整参数实现不同的视觉效果。这种方案比纯CSS节省约60%的代码量，且更易于维护和扩展。