怎样用CSS3制作无限循环且无缝衔接的文字滚动？-css教程-PHP中文网

纯CSS3实现无缝文字滚动需采用双份内容拼接+translateX(-50%)位移，配合flex与max-content自动计算宽度；竖向滚动须手动测高并设精确高度；动态内容需JS辅助更新DOM与动画时长。

怎样用css3制作无限循环且无缝衔接的文字滚动？

纯 CSS3 实现无限循环文字滚动，关键不在于“能不能动”，而在于“动得是否真正无缝”——绝大多数人卡在视觉跳变、首尾衔接不自然、动态内容适配失败这三点上。直接用 @keyframes + translateX 写死位移，90% 的情况会露馅。

常见错误是这样写动画：

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

问题在于：当动画结束，元素回到 0% 瞬间，浏览器会把内容从末尾“硬切”回开头，只要两段内容视觉不一致（比如字数不同、行高微差、字体渲染偏移），就会出现明显闪跳。这不是性能问题，是逻辑缺陷。

这是目前最稳定、无需 JS、兼容性好（Chrome 43+/Firefox 16+/Safari 9+）的方案，适合公告栏、新闻跑马灯等场景。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

HTML 结构必须包含两套完全相同的内容：A B C A B C
CSS 中禁止设置固定宽高，用 width: max-content 让 flex 容器自动伸展，否则位移计算失效
动画时长不能写死，应按内容总宽和期望速度反推：例如内容总宽 3000px，想保持 60px/s 的视觉流速，则动画时长 = 3000 / 60 = 50s，写成 animation: scroll 50s linear infinite

竖向滚动对高度敏感，max-content 在垂直方向不可靠，且 line-height、margin、字体抗锯齿都会导致像素级偏差。推荐显式计算单条高度并复用。

先用 DevTools 测出一个 .scroll-item 的精确高度（含 padding/margin），比如是 48px
设共 n 条数据，则总高度为 n × 48px；动画终点写 transform: translateY(-n × 48px)，但更稳妥的是写 translateY(-50%) 并确保父容器高度为 2 × n × 48px
避免用 vh 或百分比高度做基准，它依赖视口，而滚动区域往往嵌套在 flex/grid 布局中，容易失准
加 will-change: transform 可防 iOS Safari 重绘卡顿

当消息列表由接口实时更新、长度不可预知时，纯 CSS 方案会立刻失效——你无法在运行时修改 @keyframes 或重算 translateX 值。此时必须引入极简 JS：

监听数据变更后，重新生成双份 DOM，并用 getBoundingClientRect().width 获取真实宽度
动态改写 style 标签内的 animation-duration，或切换预设的 CSS 变量：animation: scroll var(--duration) linear infinite
绝对不要用 innerHTML 替换整个列表，会触发重排；用 DocumentFragment 批量插入新节点
如果项目已用 React/Vue，别强行塞 CSS 动画，用 useEffect 或 watch 控制 ref 元素的 style.animationDuration 更可控