MOTION HUB

无限跑马灯

Marquee Loop
#marquee-loop · 35/72
AUTO · 自动演示

参数调改

PLAYGROUND
循环时长--dur_s
640
s
文字字号--font_px
2464
px
词间距--gap_px
16140
px
两端渐隐宽--fade_px
0160
px
文字颜色--text_color
分隔点颜色--accent

实现要点

NOTES
  1. 01

    无缝核心:同一份内容在 track 里重复两份,keyframes 从 translateX(0) 线性位移到 -50%——一个周期恰好走完第一份的长度,终点与起点像素级重合,循环无接缝。

  2. 02

    track 用 width: max-content + flex 排布,gap 是内容之间的间距,第二份拷贝与第一份之间也由同一个 gap 分隔,因此 -50% 处间距节奏完全一致;不要用 padding 混搭 gap,会造成衔接处间距加倍。

  3. 03

    速度感知:--dur_s 控制的是『走过一份内容』的时间,内容越长同速感越慢;换文案后如觉得变快/变慢,按内容宽度比例重调即可。位移走 transform(合成器路径),全程 60fps。

  4. 04

    两端渐隐用 mask-image 线性渐变(需 -webkit- 前缀双写),比叠加伪元素遮罩干净——渐隐作用于整条 track,不会在内容上留下色带;--fade_px 设 0 可关闭渐隐。

  5. 05

    无障碍:track 整体 aria-hidden,真实文案放在容器 aria-label 里,读屏只读一遍不被滚动干扰;reduced-motion 下停止位移、取消 mask 并允许换行静态铺开全部词组。

源代码

SOURCE

加载源代码…