当前位置：首页 > news >正文

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

news 2025/8/15 8:56:56

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

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

核心实现原理

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

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

Sass代码实现

// 核心
.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结构

<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>