使用 Sass 打造动态星空背景效果
在前端开发中,视觉效果越来越受到重视。本文将通过一个生动的示例,讲解如何利用 Sass 构建一个具有动态星空滚动效果
的背景页面,同时也系统介绍 Sass 的核心功能与实践技巧。
一、Sass 的作用
Sass(Syntactically Awesome Style Sheets)是一种 CSS 的预处理语言,扩展了 CSS 的语法功能。它引入了变量、嵌套规则、混入(Mixin)、函数、模块化引入等强大特性,能够显著提高样式代码的复用性与可维护性。
举个简单例子,假如我们需要在多个地方复用颜色或字体,只需通过变量统一管理即可:
$primary-color: #3498db;button {background-color: $primary-color;
}
Sass 的优点:
- 让样式结构更清晰(嵌套)
- 减少重复代码(混入、继承)
- 便于维护(变量、模块化)
- 支持逻辑控制(函数、条件语句、循环)
二、全局安装 Sass
在项目中使用 Sass 前,需先通过 npm 安装它:
npm install -g sass
这将在系统中全局安装 Sass,便于在任何项目中使用其命令行工具。
三、Sass 的两种语法风格
Sass 提供了两种语法风格:Sass(缩进式) 和 SCSS(语法类似 CSS)。
风格 | 特点 | 示例 |
---|---|---|
Sass | 无需大括号和分号,使用缩进表示层级 | font-size 14px |
SCSS | 类似 CSS,需使用大括号和分号 | font-size: 14px; |
推荐使用 SCSS 风格:因为它与 CSS 更接近,学习成本更低,且被广泛使用。
四、项目目录结构
项目结构如下图所示:
index.html
:主页面index.scss
:SCSS 源文件index.css
:编译生成的 CSS 文件
五、HTML 页面结构
HTML 页面内容如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>星空背景</title><link rel="stylesheet" href="./index.css" />
</head>
<body><div class="layer1"></div><div class="layer2"></div><div class="layer3"></div><div class="layer4"></div><div class="layer5"></div><div class="title">星空背景</div>
</body>
</html>
六、启动 Sass 编译
使用如下命令实时编译 index.scss
文件为 index.css
:
sass index.scss index.css --no-source-map -w
参数说明:
--no-source-map
:选项表示不生成.map
文件,源码地图是一种将编译、压缩或转换后的代码映射回原始源代码的技术,主要用于开发调试-w
:watch 模式,监听文件变化并自动编译
七、SCSS 样式实现详解
1. 引入模块
@use "sass:string";
@use "sass:math";
2. 设置背景和标题样式
html {height: 100%;background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);overflow: hidden;
}.title {position: absolute;top: 50%;left: 0;right: 0;text-align: center;font-size: 50px;letter-spacing: 10px;font-weight: 300;color: transparent;font-family: 'Lato', sans-serif;background: linear-gradient(white, #38495a);background-clip: text;-webkit-background-clip: text;margin-top: -60px;
}
3. 创建随机星星阴影函数
@function createShadow($n) {$shadow: '#{math.random(100)}vw #{math.random(100)}vh #fff';@for $i from 2 through $n {$shadow: '#{$shadow}, #{math.random(100)}vw #{math.random(100)}vh #fff';}@return string.unquote($shadow);
}
4. 星星层级生成循环
$count: 1000;
$duration: 400;@for $i from 1 through 5 {$count: math.floor(calc($count / 2));$duration: math.floor(calc($duration / 2));.layer#{$i} {$size: #{$i}px;position: fixed;top: 0;left: 0;width: $size;height: $size;border-radius: 50%;box-shadow: createShadow($count);animation: moveUp #{$duration}s linear infinite;&::after {content: '';position: fixed;top: 100vh;left: 0;width: inherit;height: inherit;border-radius: inherit;box-shadow: inherit;}}
}
5. 动画效果
@keyframes moveUp {100% {transform: translateY(-100vh);}
}
6.完整代码
@use "sass:string"; // 引入 string 模块
@use "sass:math"; // 引入 math 模块html {height: 100%;background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);overflow: hidden;
}.title {position: absolute;top: 50%;left: 0;right: 0;color: #fff;text-align: center;font-family: 'lato', sans-serif;font-weight: 300;font-size: 50px;letter-spacing: 10px;margin-top: -60px;padding-left: 10px;background: linear-gradient(white, #38495a);background-clip: text;-webkit-background-clip: text;color: transparent;
}// 用阴影创建多个星星的函数
@function createShadow($n) {$shadow: '#{math.random(100)}vw #{math.random(100)}vh #fff';@for $i from 2 through $n {$shadow: '#{$shadow}, #{math.random(100)}vw #{math.random(100)}vh #fff'}// 去掉引号@return string.unquote($shadow);
}// 设置初始的星星数量和动画持续时间
$count:1000;
$duration:400;// 循环5层
@for $i from 1 through 5{// 每层数量减半$count:math.floor(calc($count/2)); // 星星越大(近)移动越快$duration: math.floor(calc($duration/2)); // 打印变量信息@debug 'count:#{$count}-duration:#{$duration}'; .layer#{$i} {// 控制星星大小$size:#{$i}px; position: fixed;top: 0px;left: 0px;width: $size;height: $size;border-radius: 50%;// 用阴影创建多个星星box-shadow: createShadow($count); // 设置动画animation: moveUp #{$duration}s linear infinite; // 设置子元素,让layer离开屏幕底部后还有星星出现&::after{content: '';position: fixed;left: 0;// 子元素在视口底部top: 100vh; // 继承父元素width: inherit;height: inherit;border-radius: inherit;box-shadow: inherit;}}
}@keyframes moveUp{100%{// 星星往上移动一个视口transform: translateY(-100vh);}
}
八、星空移动原理图解
原理简述:
- 每层
.layer
通过box-shadow
随机绘制大量星星; - 每颗星星被一个元素和其伪元素
::after
复制并垂直分布; moveUp
动画让星星从底部移动到顶部,形成无限循环的视觉效果;- 每层星星数量、大小、速度不同,营造出真实的视差滚动效果(Parallax Scrolling)。
最终效果:
九、技术点回顾:
- Sass 模块
@use
和内建函数 - 自定义函数生成
box-shadow
- 多层滚动星空的实现逻辑
- 使用
animation
+@keyframes
实现动态视觉效果
💬 如果你对 Sass、CSS 动效、或前端视觉设计感兴趣,欢迎留言交流或点赞支持!
相关文章:
使用 Sass 打造动态星空背景效果
在前端开发中,视觉效果越来越受到重视。本文将通过一个生动的示例,讲解如何利用 Sass 构建一个具有动态星空滚动效果的背景页面,同时也系统介绍 Sass 的核心功能与实践技巧。 一、Sass 的作用 Sass(Syntactically Awesome Style …...
低空经济有哪些GIS相关岗位?
在低空经济中,GIS(地理信息系统)技术发挥着重要作用。GIS开发工程师负责开发、维护和优化与低空经济相关的GIS系统,如无人机起降场布局、空域管理、气象监测等。一般会参与二、三维GIS项目数据处理与前端开发,以及相关…...
Python 垃圾回收机制全解析:内存释放与优化
在编写高效、稳定的 Python 程序时,内存管理往往是一个被忽视但至关重要的领域。对于 Python 开发者来说,最初的学习曲线通常集中在语法、库使用和应用框架上,而对于内存管理和垃圾回收(GC,Garbage Collection…...
性能优化实践
4.1 大规模量子态处理的性能优化 背景与问题分析 量子计算中的大规模量子态处理(如量子模拟、量子态可视化)需要高效计算和实时渲染能力。传统图形API(如WebGL)在处理高维度量子态时可能面临性能瓶颈,甚至崩溃(如表格中14量子比特时WebGL的崩溃)。而现代API(如WebGPU…...
opentelemetry笔记
span https://github.com/open-telemetry/opentelemetry-cpp/blob/f987c9c094f276336569eeea85f17e361de5e518/sdk/src/trace/span.h 在 OpenTelemetry C 的 sdk/src/trace 目录中,不同的 span 定义和实现是为了支持追踪(Tracing)功能的多样…...
【JavaScript】二十一、日期对象
文章目录 1、实例化日期对象2、相关方法3、时间戳4、案例:毕业🎓倒计时效果 1、实例化日期对象 获得当前时间 const date new Date()获得指定时间 const date new Date(2025-4-14 20:46:00) console.log(date)2、相关方法 方法作用说明getFullYear…...
GIT工具学习【1】:新安装git预操作
目录 1.写在前面2.为常用指令配置别名3.初始化4.解决中文乱码问题 1.写在前面 新安装git命令后,需要一些设置会用的比较的顺畅。 这篇文章只要跟着做即可,至于原理,后面会写清楚的。 2.为常用指令配置别名 #新建一个.bashrc touch ~/.bash…...
docker安装ES
ES安装步骤 1. 创建docker网络,使其docker内部通信 2. 下载 | 导入镜像文件(ES Kibana) 3. 创建容器,并访问 4. 安装Ik分词器(es对中文并不友好,所以需要安装IK分词使其适配中文) 1. 创建docke…...
【控制学】控制学分类
【控制学】控制学分类 文章目录 [TOC](文章目录) 前言一、工程控制论1. 经典控制理论2. 现代控制理论 二、生物控制论三、经济控制论总结 前言 控制学是物理、数学与工程的桥梁 提示:以下是本篇文章正文内容,下面案例可供参考 一、工程控制论 1. 经典…...
人工智能应用开发中常见的 工具、框架、平台 的分类、详细介绍及对比
以下是人工智能应用开发中常见的 工具、框架、平台 的分类、详细介绍及对比: 一、工具(Tools) 定义:用于完成特定任务的软件或库,通常专注于开发流程中的某个环节(如数据处理、模型调试、部署等ÿ…...
Linux磁盘格式化(mkfs、mkfs.xfs、mkfs.ext4)、Linux文件系统的校验(xfs_repair、fsck_ext4)
在Linux系统中,磁盘格式化和文件系统校验是系统管理的重要任务。以下是关键步骤和命令的总结: 磁盘格式化 1. 选择文件系统类型 XFS:适用于大文件和高并发场景,支持高性能和扩展性。ext4:成熟稳定的通用文件系统,适合大多数场景。2. 格式化命令 通用格式: sudo mkfs -…...
Android学习总结之git篇
Git 的原理时,你可以从数据结构、对象存储、引用管理、分支与合并等方面结合源码进行分析。以下是详细介绍: 1. 基本数据结构和对象存储 Git 底层主要基于四种对象来存储数据:blob(数据块)、tree(树&…...
Python基础语法——类型
目录 类型的意义动态类型静态类型 类型的意义 不同的类型,占用的内存空间是不同的. 占几个字节 int 默认是 4 个字节.动态扩容 float 固定 8 个字节 bool 一个字节就足够了 str 变长的 不同的类型,对应能够进行的操作也是不同的 int/float, “” “-” “ * ” “/”——不能使…...
vue2中基于el-select封装一个懒加载下拉框
需求 当下拉选项的数据量过大时,后端接口是分页格式返回数据。 解决方案 自定义封装一个懒加载下拉组件,每次滚动到底部时自动获取下一页数据,这样可有效防止数据量过大时造成组件卡顿。 具体实现步骤 1、创建懒加载下拉选择组件 <t…...
uniapp的h5,打开的时候,标题会一闪而过应用名称,再显示当前页面的标题
问题: 微信小程序,通过webview打开了uniapp创建的h5,但是打开h5时,会先显示h5的应用名称,然后才切换为该页面的标题。 过程: 查过很多资料,有说修改应用名称,有说设置navigationS…...
HarmonyOS 5 开发环境全解析:从搭建到实战
鸿蒙来了,从 1.0 到 5.0,它不再只是“华为的操作系统”,而是万物互联生态的核心驱动。作为开发者,你准备好拥抱这个全新时代了吗? 你是否还在犹豫:HarmonyOS 5 开发门槛高不高?该用 DevEco Stu…...
2.2 函数返回值
1.回顾def def sum(x,y): return xy res sum(10,20) #调用函数 print(res) 2.函数的三个重要属性 -函数的类型:function -函数的ID:16进制的整数数值 -函数的值:封装在函数中的数据和代码 # - 函数是一块内存空间,通过…...
OpenAI发布GPT-4.1:开发者专属模型的深度解析 [特殊字符]
最近OpenAI发布了GPT-4.1模型,却让不少人感到困惑。今天我们就来深入剖析这个新模型的关键信息! 重要前提:API专属模型 💻 首先需要明确的是,GPT-4.1仅通过API提供,不会出现在聊天界面中。这是因为该模型主…...
Cython中操作C++字符串
使用Cython开发Python扩展模块-CSDN博客中文末对python代码做了部分C优化,并提及未对字符串类型做优化,并且提到如果不是真正搞懂了C字符串的操作和Python的C API中与字符串相关的知识,最好不要动Python中的字符串类型。为了搞明白在Cython中…...
Dify插件内网安装,解决Dify1.x插件安装总失败问题,手把手教你暴力破解:从镜像源到二进制打包全攻略
背景 自从dify升级到1.0以后,所有的工具和模型都改成了插件化,需要进行插件的安装。在手撕Dify1.x插件报错!从配置到网络到Pip镜像,一条龙排雷实录 已经指出了dify在线安装插件的各种问题。 首发地址 在前面的几个版本中&…...
二极管详解:特性参数、选型要点与分类
一、二极管的基本定义 二极管(Diode) 是由半导体材料(如硅、锗)构成的双端器件,核心特性是单向导电性。其结构基于PN结,正向偏置导通,反向偏置截止。 核心功能: 整流(交…...
BufferedOutputStream 终极解析与记忆指南
BufferedOutputStream 终极解析与记忆指南 一、核心本质 BufferedOutputStream 是 Java 提供的缓冲字节输出流,继承自 FilterOutputStream,通过内存缓冲区显著提升 I/O 性能。 核心特性速查表 特性说明继承链OutputStream → FilterOutputStream → …...
Google政策大更新:影响金融,新闻,社交等所有类别App
Google Play 4月10日 迎来了2025年第一次大版本更新,新政主要涉及金融(个人贷款),新闻两个行业。但澄清内容部分却使得所有行业都需进行一定的更新。下面,我们依次从金融(个人贷款),…...
【Linux网络与网络编程】10.网络层协议IP
前言 我们之前谈的主机B把数据传递给主机C过程都是黑盒式的,即并没有考虑它的中间过程。本篇博客和下一篇博客将要考虑的问题是:主机B和主机C并不是直接连接的,主机B想要把数据传输给主机C需要经过若干路由器的。我们就引出了两个问题&#x…...
Docker 搭建 RabbitMQ
Docker 搭建 RabbitMQ 前言一、准备工作二、设置目录结构三、编写启动脚本四、Host 网络模式 vs Port 映射模式1. Host 网络模式2. Port 映射模式 五、端口配置对比六、配置示例七、查看与管理八、扩展与高可用九、常用命令 前言 在现代微服务与分布式架构中,Rabbi…...
浏览器自动化检测对抗:修改navigator.webdriver属性的底层实现
一、背景介绍:你被自动化检测拒之门外了吗? 在使用 Selenium 或 Playwright 等浏览器自动化工具爬取数据时,经常会遇到「被检测」问题,尤其像 Amazon 这样反爬策略严密的网站。常见的检测机制之一就是检查 JavaScript 中的 navig…...
聊聊Spring AI Alibaba的DocumentParser
序 本文主要研究一下Spring AI Alibaba的DocumentParser DocumentParser spring-ai-alibaba-core/src/main/java/com/alibaba/cloud/ai/document/DocumentParser.java public interface DocumentParser {/*** Parses a given {link InputStream} into a {link Document}. T…...
用css给div列表加个序号
用 CSS 的 counter 相关属性来为列表添加序号。以下是具体的代码,我将以 HTML 文件的形式提供,并且会运行展示效果: .as-div {// counter-reset: my-counter; /* 计数器名称是my-counter */// counter-reset: small-apple; /* 计数器名称是s…...
CSS标签选择器与类选择器
CSS标签选择器 标签选择器(元素选择器)是最基本的选择器之一,用于选择HTML文档中的特定标签元素并应用样式。它使用HTML标签名称作为选择器,选择匹配该标签的所有元素。 作用:通过HTML标签名选择元素 以下是CSS标签选…...
(51单片机)LCD显示日期时间时钟(DS1302时钟模块教学)(LCD1602教程)
目录 源代码 main.c LCD1602.c LCD1602.h DS1302.c DS1302.h 代码解析与教程: LCD1602模块 DS1302模块 效果视频: 源代码 如上图将5个文放在Keli5 中即可,然后烧录在单片机中就行了 烧录软件用的是STC-ISP,不知道怎么安装的…...
编译原理(自考13007)
资源内容 大纲 概述...
C#Winform程序将子窗体嵌入容器方法
private void OpenForm(Form childFrom) { //首先判断容器中是否有其他的窗体 foreach (Control item in this.panelRight.Controls) { if (item is Form) { ((Form)item).Close(); } } //嵌入新的窗体 childFrom.TopLevel false;//将子窗体设置成非顶级控件 childFrom.Parent…...
WPS JS宏编程教程(从基础到进阶)-- 第八部分:字符串技术与WPS结合应用
目录 第8章 字符串技术与WPS结合应用8-1 字符串的3种引用方式场景:动态生成报表标题三种引用方式对比代码解析表模板字符串核心优势8-2 字符串处理之切片与搜索场景:提取身份证中的出生年份三大截取方法对比方法选择指南索引搜索实战8-3 字符串处理之修改与填充场景:规范商品…...
WPS Office安卓版文档编辑功能与兼容性评测【高效编辑】
一、界面设计与操作体验 WPS Office安卓版采用简洁直观的界面设计,首页默认展示近期文档列表,支持一键新建文档、表格或演示文稿。整体操作逻辑与PC端保持一致,新用户也能快速上手。编辑工具栏设计合理,常用功能如字体设置、段落…...
【经验记录贴】使用配置文件提高项目的可维护性
mark一下。 整体修改前后如下: 课题: 在项目中有一个支持的文件类型的FILE_TYPE的定义, 这个是写死在主程序中,每次增加可以支持的文件类型的时候,都需要去修改主程序中这个FILGE_TYPE的定义。 主程序修改其实不太花时…...
传统建筑管理人力成本高,楼宇自控系统如何有效降低运营成本
在传统建筑管理模式下,人力成本一直居高不下,成为建筑运营方沉重的负担。从设备的日常巡检、维护,到环境的调控以及能源的管理,无一不需要大量人力投入。然而,随着科技的飞速发展,楼宇自控系统应运而生&…...
RabbitMQ demo案例
1. 下载和安装 RabbitMQ RabbitMQ 依赖 Erlang 运行时,所以得先装 Erlang,再装 RabbitMQ。下面以 Ubuntu 为例,Windows 和 macOS 也顺便提一下。 1.1 安装 Erlang RabbitMQ 需要 Erlang 支持,先装它。 Windows: 去 Erl…...
第T8周:猫狗识别
🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 第T8周:猫狗识别 tf.config.list_physical_devices(“GPU”),用于检测当前系统是否有可用的 GPU,并将结果存入 gpus 变量。…...
旅游特种兵迪士尼大作战:DeepSeek高精准路径优化
DeepSeek大模型高性能核心技术与多模态融合开发 - 商品搜索 - 京东 随着假期的脚步日渐临近,环球影城等备受瞩目的主题游乐场,已然成为大人与孩子们心中不可或缺的节日狂欢圣地。然而,随之而来的庞大客流,却总让无数游客在欢乐的…...
ffmpeg-将多个视频去掉音频 然后切片组合成一个视频,再将新视频配置上新的音频
需求分解 1、去除原视频的音频轨道。 2、对去掉音频的视频进行切片。 3、将多个视频切片合并为一个新视频。 4、给新的视频添加新的音频轨道。 去除视频音频 要去除视频中的音频,只需使用以下命令 ffmpeg -i input1.mp4 -an -c:v copy output1_no_audio.mp4解释&a…...
05-微服务可观测性体系建设:从日志、监控到链路追踪实战指南
微服务可观测性体系建设:从日志、监控到链路追踪实战指南 一、可观测性:微服务架构的 “神经系统” 1.1 为什么需要可观测性? 在分布式微服务架构中,服务节点可能达数百个,请求链路跨越多服务、数据库、消息队列&am…...
音视频小白系统入门笔记-0
本系列笔记为博主学习李超老师课程的课堂笔记,仅供参阅 音视频小白系统入门课 音视频基础ffmpeg原理 绪论 ffmpeg推流 ffplay/vlc拉流 使用rtmp协议 ffmpeg -i <source_path> -f flv rtmp://<rtmp_server_path> 为什么会推流失败? 默认…...
基于 PyTorch 的 LSTM 实现降雨量预测
基于 PyTorch 的 LSTM 实现降雨量预测示例。包括数据准备、模型定义、训练和预测等。 文章目录 1. 数据准备:2. 模型定义:3. 训练过程:4. 预测和评估:5. 可视化:代码实现1. 数据准备: 使用随机生成的数据作为示例,实际应用中请替换为真实数据。数据被归一化到 [0, 1] 范…...
Spring-Bean的生命周期
一、什么是Bean生命周期? Spring容器中的Bean从创建到销毁的完整过程被称为Bean生命周期,包含实例化→属性注入→初始化→使用→销毁五个核心阶段。Spring提供了丰富的扩展点,允许开发者在各阶段插入自定义逻辑。 二、Bean生命周期全流程&am…...
AI大模型如何重塑科研范式:从“假说驱动”到“数据涌现”
📝个人主页🌹:慌ZHANG-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、引言:科研进入“模型共研”时代 传统科研范式通常以“假设→实验→验证→理论”的方式推进,这一经典路径建立在人类的认知能力与逻辑推理基础上。然而,随着数据规模的爆炸式增长与知识系统的高度复杂…...
yml文件上传并映射到实体类
文章目录 功能背景功能需要前端开发组件选用组件嵌套和参数绑定上传逻辑示例 后端开发接收逻辑解析逻辑省流纯手动实现(不建议) 功能背景 开发一个配置文件解析功能,需要兼容老版本的配置文件。 功能需要 前端:两个配置文件分别…...
What are the advantages of our neural network inference framework?
What are the advantages of our neural network inference framework? 1. Background2. What are the advantages of our neural network inference framework?References 1. Background Let me introduce /ˌɪntrəˈdjuːs/ the background /ˈbkɡraʊnd/ first. Today…...
猿辅导集团推首个教育AI范式小猿AI 聚焦家校应用场景发布3款新品
近两年,通用大模型呈爆发式发展,垂类AI遭遇“技术平替”危机。 4月15日,猿辅导集团在“小猿AI暨智能硬件战略发布会”上,正式推出首个教育AI范式——“小猿AI”,并发布覆盖家校两端的“软件应用智能终端通识课程”三位…...
10【模块学习】LCD1602(二):6路温度显示+实时时钟
项目:6路温度显示实时时钟 1、6路温度显示①TempMenu.c文件的代码②TempMenu.h文件的代码③main.c文件的代码④Timer.c文件的代码⑤Delay.c文件的代码⑥Key.c文件的代码 2、实时时钟显示①BeiJingTime.c文件的代码②BeiJingTime.h文件的代码③main.c文件的代码如下④…...
Embedding在RAG中的核心作用及其几何类比-来自DeepSeek
1. 核心概念映射 Embedding的本质:将文本、图像等非结构化数据转化为高维空间中的坐标点(向量),例如: 句子A → 向量 [0.2, -1.5, 3.0, ..., 0.7](假设维度为768) 句子B → 向量 [0.3, -1.4, 2…...