AUTO · 自动演示
参数调改
PLAYGROUND
光带色 A(主)--aurora_a
光带色 B--aurora_b
光带色 C--aurora_c
摆动周期--speed_s
830
模糊半径--blur_px
20100
整体倾角--tilt_deg
-2525
夜空底色--base
实现要点
NOTES- 01
与渐变网格的差异:极光用三条『幕帘』式长条横向渐变,靠统一的整体倾角和三条带的速度/相位差制造错落层次。
- 02
低饱和同色系配色 + screen 混合让交叠处自然提亮,再叠一层整体暗角,光感有来源、四角有收拢,不靠高饱和抢眼。
- 03
负 animation-delay 让三条光带在初始时刻就处于不同相位,避免开场整齐划一的『齐步走』感。
- 04
blur 收敛在容器一层,光带只动 transform(translateX / rotate / scaleY 合成器路径);容器四周负 inset 出血防露边。
- 05
实际使用建议透明度控制在 0.4-0.7 之间垫在内容下方当氛围层,避免抢主体;reduced-motion 下静止成静态光带。
源代码
SOURCE
加载源代码…