跑马灯
Marquee
一排内容不停地横向滑过，首尾相接，看不出接缝。
- 又叫：
- 无缝滚动
- 横向滚动条
- 循环滚动
- marquee
- infinite marquee
- ticker
- scrolling text
- 展厅
- 布局与结构
- 形态
- 固定舞台
- 播放
- 常驻循环
- 关键词
- 需要 JS / 渐变 / 合成层动画 / 动效较多 / 可以直接用
参数工作台
复制给 AI
随参数实时更新做一个无缝跑马灯（marquee）：内容复制一份首尾相接，用 transform: translate3d 横向匀速平移 50% 循环，速度约 40px/s、linear 匀速；指针悬停或键盘聚焦时暂停，两端加渐隐遮罩（mask-image）避免硬切，复制的那一份设 aria-hidden 免得读屏念两遍；内容比容器短时要先复制到足够长。prefers-reduced-motion 下停住，改成静态换行展示。
seamless horizontal marquee, content duplicated and translated 50% in a linear infinite loop with transform: translate3d, about 40px/s, pauses on hover and keyboard focus, faded edges via mask-image, duplicate marked aria-hidden, duplicated until the track is longer than the container, animation stops under prefers-reduced-motion
https://publieople.github.io/design-museum/entry/marquee/?stage=light
链接带着你调好的参数
什么时候用
- 客户 logo 墙、合作方列表这类「多到放不下但每条都很短」的内容
- 公告、注意事项这类要一直提醒但不值得占一整屏的信息
- 标签流、作品缩略图做背景装饰，让画面一直在动
适用场景：列表 / 页面 / 滚动
推荐取值
- 速度
- 20–60px/s（约等于阅读速度的一半）
- 无缝
- 复制一份内容，整体平移 50%
- 暂停
- 悬停暂停 + 明确的暂停按钮
- 两端
- 加渐隐遮罩（mask-image）避免硬切
- 降级
- prefers-reduced-motion 下不自动滚动
别搞混
和「自动轮播」的区别
轮播是分页的：一屏一屏地翻，还有指示点；跑马灯是匀速连续滚动，没有「第几屏」的概念。
和「滚动捕捉」的区别
滚动捕捉是用户自己滑、停下时吸附到某一项；跑马灯是自己走、用户只读，停下来只是因为悬停。
容易混的去看「滚动捕捉」
容易踩的坑
- 无缝要复制一份内容并整体平移 50%（或正好一整份的宽度），否则会看到「唰」地跳回起点
- 用 transform: translate3d 做位移，别用 margin-left / left，后者每帧都要重排
- 悬停或聚焦时暂停是惯例，最好再给一个暂停按钮，否则读屏和慢读的用户永远读不完
- 复制出来的那一份要 aria-hidden，不然读屏软件会把内容念两遍
- 离屏时动画还在烧电：用 IntersectionObserver 或 animation-play-state 停掉
- 内容比容器短时不要循环，会出现空档；长度不够就复制到足够长
无障碍降级
prefers-reduced-motion 下不要自动滚动：把内容静态换行展示，或改成用户可以自己横向滑动的区域。
关键词
- marquee
- infinite marquee
- ticker
- @keyframes translateX
- transform: translate3d
- animation-play-state
- mask-image
- aria-hidden duplicate