纯CSS实现无缝滚动走马灯：从原理到工程实践

走马灯这东西，很多前端第一反应都是“用<marquee>不就行了”，真正动手接活动页、做公告栏的时候才发现问题一堆：样式难以控制、动画节奏不对、循环时卡一下或者闪一下，最后搞得自己都不好意思拿出手。其实走马灯用纯CSS实现，难点从来不是“让文字动起来”，而是“动得丝滑、循环无感、结构还能扛住真实需求”。这篇文章我就把这个效果从布局原理到工程代码完整拆开讲，看清了原理之后，无论横向竖向、单条还是多条，你都能自己推导出实现方案。

1. 从<marquee>说起：为什么老标签退场了，纯CSS方案却回归了

如果你翻过一些老网页源码，肯定见过这种写法：

html复制<marquee direction="left" scrollamount="3">公告内容</marquee>

这个标签确实是“走马灯”的鼻祖，到现在浏览器普遍还认它，但它是 HTML 的非标准元素，从来就没进过正经规范。问题在于：它给到前端的控制能力太弱了。想让它停在某条消息上？做不到。想让滚动的起始位置精确可控？做不到。想跟页面整体的视觉语言统一，比如换字体、换间距、加背景、加渐变遮罩？哪怕能改，也只能靠一堆浏览器私有的 hack 去碰运气。

更麻烦的是，<marquee> 的滚动行为不是 CSS 可以精细描述的，不同浏览器的默认速度、停顿策略、鼠标悬停行为都可能不一样。一个产品里如果有多处用到它，出来的节奏完全是“各滚各的”，体验很难统一。

CSS 方案回归的核心原因是：动画能力足够成熟之后，走马灯本质上就是一个“连续位移动画 + 内容循环”的组合需求，这正好落在 CSS 擅长处理的范围里。用 transform 配合 animation，流畅度、暂停、变速、方向、惯性都变得可控，而且 GPU 合成动画不会像老方案那样频繁触发布局，也不会把主线程拖垮。

不过这里有个很有意思的现象：很多人从 <marquee> 迁移到 CSS 后，写出来的第一版效果反而更差了。常见死法是——一个段落设了 animation: scroll 4s linear infinite，确实滚起来了，但每次滚完一遍都要“咻”地跳回起点，中间有明显的断档。原因不是 CSS 动画不好用，而是没理解走马灯实现里最关键的一个细节：要让循环无感，得先把内容复制一份甚至多份，制造一个“永远接得上”的长轨道。这个问题我会在下一节展开讲，因为它是整个方案的地基，把这个想通了，后面所有变形都不难。

1.1 走马灯在现代前端里的典型应用场景

在具体写方案前，先看看走马灯到底还“活”在哪里，这决定了我们怎么设计代码：

• 公告/通知栏：官网最新公告、版本更新提示、运营消息轮播。
• 直播间/会场氛围：中奖名单、欢迎语、弹幕提醒，讲究连续和动感。
• 新闻/专题标题：像电视底部跑马字幕一样循环展示一组标题。
• 运营横幅：多张 banner 或者商品卡片横向循环滚动。
• 招聘/口号/口号墙：活动页里的“限时优惠”之类文字，不占用太多版面又能持续吸引注意。

这些场景的共同点是：内容需要持续曝光，但又不希望用户手动去翻页，或者这块区域的尺寸很受限（通常只有一条窄窄的空间）。所以轮播这里最合适的形式，不是“隔几秒翻一页”，而是“一直丝滑地流过”。理解了场景，就能明白为什么有些文章里写的“横向移出后等待片刻再循环”在真实项目里并不好用——公告屏上的文字每停一下都会让人以为网络卡了。

2. 无缝滚动的地基：内容复制一次、动画位移 50%、轨道自身就是滚动容器

有经验的前端看到“走马灯”三个字，第一反应不是去写动画，而是先去问结构：一个视口窗口、一个内容轨道、轨道的位移量怎么算。这几个元素之间的关系没理顺，后面怎么写都是表面功夫。

我用一句话概括 CSS 走马灯的核心套路：你当前看到的画面，永远是一段连续长文本里的某个局部窗口，而这段长文本由若干份相同内容首尾相接而成；动画要做的事，只是把整个长轨道的坐标从“第一份开头”平滑挪到“第二份开头”，然后瞬间回到起点。

怎么理解这句话？拆开来说：

• 视口：也就是页面上你挖出来的那块区域，一般是一个外层容器，加上 overflow: hidden。
• 轨道：外层容器内部真正在移动的长条，它可以包含多份相同内容。
• 位移量：不是百分比越大越好，而是恰好移动“一份内容”的宽度或高度。内容复制了两份时，一份宽度等于轨道总宽度的 50%，所以动画终点才写 translateX(-50%)。

很多人第一版写成 translateX(-100%)，意思是从头挪到尾部，把整条内容全部滚出视口才回头。如果里面只有一份内容，必然会在终点露出大片空白，然后“啪”地一下跳回开头。哪怕视觉上闪烁只有零点几秒，用户也是能感觉到的，动画的“廉价感”往往就是这么来的。

复制两份之后，动画的终点和起点虽然坐标不同，但我们看向视口时看到的画面是一样的，因为两份内容长得一模一样。于是“跳回”这个过程从视觉上被隐去了，这就实现了所谓的无缝循环。

2.1 为什么是 50%，100% 到底错在哪里

有人会问：如果我