AUTO · 自动演示
参数调改
PLAYGROUND
循环时长--dur_s
640
文字字号--font_px
2464
词间距--gap_px
16140
两端渐隐宽--fade_px
0160
文字颜色--text_color
分隔点颜色--accent
实现要点
NOTES- 01
无缝核心:同一份内容在 track 里重复两份,keyframes 从 translateX(0) 线性位移到 -50%——一个周期恰好走完第一份的长度,终点与起点像素级重合,循环无接缝。
- 02
track 用 width: max-content + flex 排布,gap 是内容之间的间距,第二份拷贝与第一份之间也由同一个 gap 分隔,因此 -50% 处间距节奏完全一致;不要用 padding 混搭 gap,会造成衔接处间距加倍。
- 03
速度感知:--dur_s 控制的是『走过一份内容』的时间,内容越长同速感越慢;换文案后如觉得变快/变慢,按内容宽度比例重调即可。位移走 transform(合成器路径),全程 60fps。
- 04
两端渐隐用 mask-image 线性渐变(需 -webkit- 前缀双写),比叠加伪元素遮罩干净——渐隐作用于整条 track,不会在内容上留下色带;--fade_px 设 0 可关闭渐隐。
- 05
无障碍:track 整体 aria-hidden,真实文案放在容器 aria-label 里,读屏只读一遍不被滚动干扰;reduced-motion 下停止位移、取消 mask 并允许换行静态铺开全部词组。
源代码
SOURCE
加载源代码…