如何使用纯CSS制作无缝循环跑马灯Marquee文字滚动效果？-css教程-PHP中文网

纯 CSS 跑马灯实现无缝滚动必须复制内容并用 translateX + 百分比位移；起点 100%、终点 -100%，配合 linear 时序、nowrap 和硬件加速，动态内容则需 JS 介入。

如何使用纯css制作无缝循环跑马灯marquee文字滚动效果？

纯 CSS 跑马灯能实现真正无缝、无 JS、不卡顿的滚动，但必须满足两个硬性条件：内容要复制、位移要用 translateX + 百分比。漏掉任一，就会在循环点出现跳帧或停顿。

单段文字从 translateX(100%) 滚到 translateX(-100%) 时，末尾离开视口后，开头还没进视口——中间有空白期。复制一份内容拼接，就能让第二份紧接第一份尾部，视觉上连续。

动画起点必须是内容完全在容器右侧外，终点是内容完全在左侧外——且两者位移总量要等于「一个完整内容宽度」。用百分比最稳妥，避免像素值随字体缩放失效。

推荐写法：0% { transform: translateX(100%); } 100% { transform: translateX(-100%); }
错误写法：0% { transform: translateX(300px); } 100% { transform: translateX(-300px); }（容器变宽就断层）
如果内容是双份拼接，实际滚动距离是单份宽度，所以终点仍用 -100%，不是 -200%

速度由 animation-duration 决定，但它的单位是「滚动一整圈的时间」，不是「每秒多少像素」。内容越长，视觉速度越慢；内容越短，看着越快。想固定视觉流速，得反向算时间。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

假设希望视觉滚动速度 ≈ 80px/s，内容总宽度为 scrollWidth（可用 DevTools 查看），则设 animation-duration: calc(scrollWidth / 80)s
实际项目中建议用 CSS 自定义属性 + style 动态注入，纯 CSS 无法读取 scrollWidth
务必设 animation-timing-function: linear，否则缓动函数会让首尾变速，破坏无缝感

跑马灯在小屏上最常出问题：文字被截断、动画突然加速、hover 暂停失效。根本原因是视口变化后，百分比基准变了，但动画没重算。

white-space: nowrap 必须加在内容元素上，不是容器上；否则换行会撑高容器，溢出隐藏失效
用 will-change: transform 触发硬件加速，尤其在 iOS Safari 上能明显减少卡顿
暂停交互只靠 :hover 不够——手机没 hover；需配合 @media (hover: none) 降级为常动，或加 JS 监听 touchstart

最麻烦的其实是动态内容：Vue/React 渲染后文本长度变了，但 CSS 动画 duration 还是旧的。这时候纯 CSS 就到头了，得切到 requestAnimationFrame + 宽度监听方案。别硬撑。