纯JavaScript的星空背景插件（wsStarfield）完全使用指南
一个纯 JavaScript 实现的星空背景插件，无需任何依赖。它通过 CSS 3D 变换在页面底层构建了一个由数百颗独立星星组成的旋转星场，配合径向渐变的深邃夜空，营造出沉浸式的太空漫游视觉体验。为你的网页注入一片深邃的旋转星空，3D 视差效果，轻量且优雅。
插件采用了 `preserve-3d` 渲染上下文，每颗星星拥有独立的 `Z` 轴深度、旋转角度和缩放比例，从而形成自然的立体景深感。整个星空会围绕 Y 轴持续缓慢旋转，动画流畅且性能经过优化。
适用场景：个人博客首页、技术演示页面、启动屏、沉浸式品牌展示页等。
核心特性
零依赖：纯原生 JavaScript，无需引入任何第三方库。
轻量级：压缩后仅 ~3KB，加载开销极小。
3D 景深：每颗星星独立 Z 轴位置，呈现真实立体感。
平滑旋转：基于 CSS 动画，GPU 加速，60fps 流畅运行。
可配置性强：支持星星数量、颜色、大小、旋转速度、背景渐变等多维度定制。
API 友好：提供 `show`、`hide`、`toggle`、`config`、`destroy` 等完整控制接口。
自适应：自动适配视口尺寸变化。
快速上手
1. 引入插件
<script src="wsStarfield.js"></script>
2. 默认初始化
插件在加载时会自动初始化，无需额外调用。打开页面即可看到星空背景。
3. 用法示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>星空背景</title> </head> <body> <h1>星空背景插件</h1> <!-- 引入星空插件 --> <script src="wsStarfield.js"></script> </body> </html>
就这么简单。星空会作为固定背景层出现在所有内容的下方（`z-index: -999999`）。
配置参数
插件内部维护了一个 `CONFIG` 对象，所有参数均可在初始化前或运行时通过 `config()` 方法修改。
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| starCount | Number | 400 | 星星总数。值越大星场越密集，性能开销也相应增加 |
| starColor | String | #F7F7B6 | 星星颜色，支持任意 CSS 颜色值（十六进制、RGB、颜色名等） |
| starSize | Number | 2 | 星星基础尺寸（像素），实际渲染时会结合随机缩放值 |
| rotationSpeed | Number | 90 | 完成一整圈旋转所需的秒数。值越小旋转越快 |
| minZ | Number | 800 | 星星 Z 轴最小深度。值越大星星分布越靠后 |
| maxZ | Number | 1100 | 星星 Z 轴最大深度。与 `minZ` 共同决定景深范围 |
| gradientColors | Array | ['#000 10%', '#000035 40%', '#0b2570 65%', '#0070aa'] | 径向渐变的色标数组，从中心向外过渡 |
| zIndex | Number | -999999 | 容器的层叠顺序。确保星空位于页面最底层 |
| perspective | Number | 500 | 3D 透视距离（像素），影响立体感的强度 |
| rotateZ | Number | 20 | 视口的 Z 轴旋转角度（度），制造倾斜视觉效果 |
| rotateX | Number | -40 | 视口的 X 轴旋转角度（度），俯仰视角控制 |
| idPrefix | String | sfp- | 所有 DOM 元素的 ID 前缀，用于防止命名冲突 |
| enabled | Boolean | true | 插件启用状态。仅用于状态追踪，不建议直接修改 |
API 说明
插件在全局暴露了 `window.StarfieldPlugin` 对象，提供以下方法：
show()
显示星空（如果处于隐藏状态）。
wsStarfield.show();
hide()
隐藏星空。
wsStarfield.hide();
toggle()
切换星空显示状态。
wsStarfield.toggle();
config(options)
动态更新配置并自动重建星空。
// 将星星数量增加到 600 颗，颜色改为淡蓝色
wsStarfield.config({
starCount: 600,
starColor: '#AAD4FF'
});注意：调用 `config()` 后会完全销毁并重新生成星空，动画状态会重置。
destroy()
彻底销毁插件实例，移除所有 DOM 元素并清理全局引用。
wsStarfield.destroy();
销毁后如需重新启用，需重新加载脚本。
getStatus()
获取当前运行状态。
const status = wsStarfield.getStatus(); console.log(status.enabled); // true / false console.log(status.starCount); // 当前星星数量
有 0 位网友评论：