MOTION HUB

渐变轨道

Gradient Orbits
#gradient-orbits · 21/72
AUTO · 自动演示

参数调改

PLAYGROUND
轨道色 A(内)--color_a
轨道色 B(中)--color_b
轨道色 C(外)--color_c
基准公转周期--orbit_s
1040
s
模糊半径--blur_px
1670
px
底色--base

实现要点

NOTES
  1. 01

    轨道结构三层嵌套:外层 ring 只做一次性静态整形(rotate 定倾角 + scaleY 压成椭圆),中层 spin 匀速 rotate(360deg),光斑固定在 spin 盒右侧 82% 处——一个旋转动画就把光斑带成椭圆轨道。

  2. 02

    三条轨道周期 1x / 1.5x(reverse) / 0.7x,方向与速率各不相同;光斑交错掠过时 screen 混合自然提亮,形成『交汇』瞬间。

  3. 03

    光斑用 left/margin 百分比定位,随容器等比缩放,任何画幅轨道都完整;blur 收敛在容器一层。

  4. 04

    wash 是静态光晕垫底(常显基线),光斑转到远处时画面仍有色彩重心,不会出现空黑帧。

  5. 05

    只动 transform(合成器路径);reduced-motion 下停用公转,三个光斑静止在不同轨道位置;实际页面建议整块垫在内容层之下。

源代码

SOURCE

加载源代码…