AUTO · 自动演示
参数调改
PLAYGROUND
星点色--star_color
星云色 A--nebula_a
星云色 B--nebula_b
闪烁周期--twinkle_s
210
星点基准半径--star_px
0.83
夜空底色--base
实现要点
NOTES- 01
星点用多组 radial-gradient 小圆按百分比定位画在整层背景上,而不是 box-shadow 长列表——百分比随视口缩放,任何尺寸的容器星点分布都不变形,也免维护一大串 px 坐标。
- 02
三层星点按远近分尺寸(0.7x / 1.1x / 1.6x),闪烁周期 1x / 1.45x / 1.9x 并用负 delay 错开相位,避免三层『齐步走』式的整齐闪烁。
- 03
只动 opacity:星层是独立合成层,透明度动画不触发重绘;不给星点加 blur / filter,低端设备也能稳定跑。
- 04
星云光晕是静态常显层(wash),任何时刻画面都有颜色基底,不会出现大面积纯黑帧;body::after 的暗角把视线收向中心。
- 05
星点密度由背景里渐变条数决定,想更密就复制渐变行;reduced-motion 下停用闪烁,保留静态星野。
源代码
SOURCE
加载源代码…