← 返回首页
首页星空版本:20260717g
架构页版本:20260717g-arch1

首页星空效果参数图

本页使用由首页当前星空源文件生成的独立资源 /css/stars-architecture.css/js/stars-architecture.js,当前版本为 20260725-member-state4,同时不会让其它页面共用首页成品包。

3星云光团
18+12旋转闪烁 / 长亮白星
12固定长亮白星
25固定闪烁白星
14+3组内十字 / 大十字
5彩色游走星球

一、渲染父子层级

层 1
body

暗色基础宇宙背景

z-index:页面最底层;3 团椭圆星云(800/700/600px)+12 颗 2–3px 基础碎星。

星云透明度:0.50 / 0.45 / 0.40;亮色模式恢复纯白背景。

层 2
z:0

.stars-bg-rotate 旋转合成层

150vw × 150vh,以视口中心为旋转轴;基础径向星点+18 颗独立错峰呼吸闪烁白星+12 颗独立长亮白星。

父层桌面端 120 秒、手机端 150 秒顺时针旋转;长亮星使用真实圆形 DOM 节点,旧 ::after spread 阴影已经禁用。

层 3
z:1

.stars-bg-layer 固定与游走效果层

12 颗独立固定长亮星+25 颗错峰闪烁星+3 颗大十字星+5 颗彩色游走星球。

固定长亮星使用等宽高节点和 50% 圆角;旧 ::before spread 阴影禁用,整层仍保持 pointer-events:none

内容层
z:2+

网站业务与交互组件

头部、轮播图、弹窗、栏目、页脚及悬浮按钮始终位于星空层上方;本说明页内容使用 z-index:10。

二、核心白星位置分布图

30 颗旋转白星(18 颗呼吸闪烁+12 颗长亮)

坐标由首页数组自动生成金色外圈代表长亮组纯十字节点无圆形核心

12 颗固定长亮白星(4 列 × 3 行)

8–25px 实体直径圆形节点只使用零 spread 柔光3颗指定索引替换为纯十字光芒

三、动画与亮度参数

对象动画关键参数逻辑隔离
旋转父层starsRotate120s linear infinite,0° → 360° 顺时针;无整体呼吸只控制父层 transform
18 颗旋转呼吸闪烁白星rotatingWhiteStarsBlink6–20px;2.85–4.30s 独立错峰;opacity 0.08 → 1 → 0.26;scale 0.55 → 1.32 → 0.75放大时亮度升至1.12,缩小时降至0.55;基础光晕仍与固定闪烁星一致
12 颗旋转长亮白星无闪烁动画18–20px;圆形节点使用 12/28px 零 spread 柔光;opacity 1独立 DOM 节点,仅继承父层旋转;旧 ::after 禁用
12 颗固定长亮白星无动画8–25px;等宽高圆形节点;opacity 1独立 DOM 节点,不参与旋转;旧 ::before 禁用
25 颗闪烁星twinkle2.5s;4–14px;延迟 0–2.4s 错峰独立 DOM 星点
3 颗大十字星bigStarBlink3s;纯四向线性光芒,无圆形核心和圆形阴影延迟 0/1/2s
5 颗彩色星球planetFloat1–520–30s;多阶段位移与 0.75–1.3 缩放每颗独立轨迹,避免 transform 相互覆盖

四、五颗彩色星球参数

红色星球

PC:100px;手机:60px

位置:top 15% / left 10%

周期:25s

蓝色星球

PC:140px;手机:80px

位置:top 60% / right 8%

连续径向光晕,已规避网格分块

紫色星球

PC:80px;手机:50px

位置:top 35% / right 20%

周期:20s

橙色星球

PC:60px;手机:40px

位置:bottom 20% / left 25%

周期:28s

青色星球

PC:45px;手机:30px

位置:top 75% / left 60%

周期:22s

五、性能、响应式与冲突防护

事件安全

所有星空层统一使用 pointer-events:none,不会截获登录、咨询、汉堡菜单、悬浮徽章、字动画及回到顶部按钮的点击。

父子动画分工

旋转只放在父层;18颗呼吸闪烁星在子节点内平滑改变亮度并轻微缩放,12颗长亮星没有子动画,因此子动画不会覆盖父层旋转。

移动端响应

手机端保留完整白星体系,旋转层周期调整为150秒;长亮白星仍为独立圆形节点,不再使用会栅格化成方块的 spread 阴影。

减少动态效果

系统启用 prefers-reduced-motion 时停止父层旋转,但18颗错峰呼吸闪烁动画仍保留;12颗旋转长亮星与12颗固定常亮星保持可见。

六、首页当前运行参数注入

正在读取由首页星空源生成的独立参数快照…

星组编号横向坐标纵向坐标基础尺寸周期错峰延迟节点样式
等待运行时参数…