MOTION HUB

星野闪烁

Starfield Twinkle
#starfield-twinkle · 61/72
AUTO · 自动演示

参数调改

PLAYGROUND
星点色--star_color
星云色 A--nebula_a
星云色 B--nebula_b
闪烁周期--twinkle_s
210
s
星点基准半径--star_px
0.83
px
夜空底色--base

实现要点

NOTES
  1. 01

    星点用多组 radial-gradient 小圆按百分比定位画在整层背景上,而不是 box-shadow 长列表——百分比随视口缩放,任何尺寸的容器星点分布都不变形,也免维护一大串 px 坐标。

  2. 02

    三层星点按远近分尺寸(0.7x / 1.1x / 1.6x),闪烁周期 1x / 1.45x / 1.9x 并用负 delay 错开相位,避免三层『齐步走』式的整齐闪烁。

  3. 03

    只动 opacity:星层是独立合成层,透明度动画不触发重绘;不给星点加 blur / filter,低端设备也能稳定跑。

  4. 04

    星云光晕是静态常显层(wash),任何时刻画面都有颜色基底,不会出现大面积纯黑帧;body::after 的暗角把视线收向中心。

  5. 05

    星点密度由背景里渐变条数决定,想更密就复制渐变行;reduced-motion 下停用闪烁,保留静态星野。

源代码

SOURCE

加载源代码…