纯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% 到底错在哪里

有人会问：如果我把内容复制两份再位移 100% 不是正好吗？这里的 100% 指的到底是什么，需要说清楚。

CSS 里 transform: translateX() 的百分比，是相对执行动画的元素自身尺寸来计算的。如果你把两份内容放在同一个轨道元素里，这个轨道的宽度是两份内容宽度的总和。所以：

• -50%：正好移动一份内容宽度，第一份完整离开视口，第二份顶上，位置回到第二份的开头，和初始画面完全一致。
• -100%：移动了整个轨道的总宽，也就是两份内容全部滚出视口。动画结束时视口里什么都没有，当然会闪白后跳回。

所以结论很清晰：轨道里放了两份内容，动画位移就写 -50%。如果轨道里放了 K 份内容，那动画位移就要写 -100 / K %，因为移动 1 份的长度就足够完成一次无感循环。实际操作里放两份最省事，也最稳妥。

2.2 “轨道宽度”是个大坑：flex 默认会压缩子元素

还有一点容易被忽略：两份内容放进一个容器后，容器的默认宽度往往不是你想象中的“两份完整宽度”。如果直接给轨道设 display: flex，而子项没有明确不收缩的话，flex 会按照容器的可用空间压缩每一个 flex item，内容会被挤成一份残缺的样子。

解决方案是给轨道设置 width: max-content，这样轨道宽度就是内部内容的自然总宽度，不会再被外层容器约束；同时每一项需要设置 flex-shrink: 0，确保内部的内容组不会在轨道变宽时被压扁。这两个设置是配套使用的，单独只写其中一个，在部分结构下可能碰巧能跑，但在复杂一点的多条消息场景里就会再现问题。

3. 可以直接抄作业的 HTML/CSS 走马灯实现

原理通了，接下来给你一份完整可用的实现。这段结构我按“低耦合”的方式拆成了两层：外层 .marquee 是可见视口，内层 .marquee__track 是滚动轨道，轨道里放两段完全一样的 .marquee__group。实际开发时只需要更新其中一段，另一段通过 JS 复制或模板渲染保持同步即可。

HTML 结构：

html复制<div class="marquee">
  <div class="marquee__track">
    <div class="marquee__group">
      <span>这是一条滚动公告</span>
      <span>这是第二条滚动公告</span>
      <span>这是第三条滚动公告</span>
    </div>
    <!-- 第二组内容和第一组完全一致，用于实现无缝循环 -->
    <div class="marquee__group" aria-hidden="true">
      <span>这是一条滚动公告</span>
      <span>这是第二条滚动公告</span>
      <span>这是第三条滚动公告</span>
    </div>
  </div>
</div>

CSS：

css复制.marquee {
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f9fafb;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 24s linear infinite;
}

.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 32px;
  padding-right: 32px;
}

.marquee__group span {
  font-size: 14px;
  line-height: 40px;
  white-space: nowrap;
  color: #374151;
}

@keyframes marqueeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

跑起来之后，你会看到三个 span 组成的一组消息像一条完整横幅那样连续向左流转，第一组末尾正好衔接第二组开头，循环时眼睛完全看不出“跳变”的瞬间。真正的效果和文案滚动类组件的产品体验已经没区别了。

3.1 完整结构里最重要的三个 CSS 属性逐个解释

你以为这段代码里的灵魂是 @keyframes，其实真正决定成败的是另外三个很容易被略过的属性：

width: max-content。这个属性让 .marquee__track 不再受 .marquee 容器宽度限制。如果一个轨道默认宽度是 auto，在块级布局下它会填满父容器，flex 子项也默认 flex: 0 1 auto，宽度不够时会被压缩。max-content 告诉浏览器：轨道请按内部所有内容的“理想自然宽度”展开，不要受可用空间影响。这样两份内容才能水平排开，滚动动画才有足够的距离可走。

flex-shrink: 0。它写在 .marquee__group 上，从机理上杜绝了子项被压缩的可能性。即使哪天你忘了 max-content，子项也会以自身内容宽度撑开，不会出现两份内容挤在一起互相“抢饭”的问题。

white-space: nowrap。这几项都写着文字，如果内容里碰到标点或空格，浏览器可能会换行。既然是横向滚动，就不可以让一条消息在视觉上断成两截，所以每条消息内部禁止换行。如果你用的是块级容器而不是 span，记得给它加 white-space: nowrap，或者干脆用小标题 <span>、<a> 这类行内元素。

3.2 一行渐变遮罩让走马灯跟两边平滑融入背景

没有加遮罩的走马灯看起来像一个硬嵌入页面的“滚动条窗口”，视觉效果和产品整体容易脱节。最常用的点缀是在容器左右两侧加一层渐隐遮罩，让内容从两侧“淡入”“淡出”，看起来更像是内容在页面背后自然穿梭，而不是被刀切了一块。

给 .marquee 加一个伪元素实现：

css复制.marquee {
  position: relative;
  /* ...原有样式 */
}

.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 1;
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background: linear-gradient(to right, #f9fafb, transparent);
}

.marquee::after {
  right: 0;
  background: linear-gradient(to left, #f9fafb, transparent);
}

这样容器两头会出现白色渐隐，内容滚动到边缘时是慢慢变淡消失的，高级感明显上来了。要注意伪元素的背景色得跟着 .marquee 的底色走才能融为一体，如果底色是透明且底下有复杂背景图，这种做法就不合适了，这时可以用 mask 或给轨道内容前后手动加空格段处理。

4. 从单行到多条、从横向到竖向：常用变体怎么改

基础版跑通了，真实项目里你还会碰到不少变化：不是一条消息滚到底，而是多条消息轮流滚；公告区域窄但纵向放得下好几行；又或者页面上两个模块需要同时滚动但速度不一样。这些都不必推翻从零写，只要在原有框架上微调即可。

4.1 多条消息连成一条整组滚动

像“新闻速递”这类需求，期望是一组标题（比如 3~5 条）从左向右滚动。每次只滚一条显然效率低也没那么顺滑，常规做法就是把多条消息全部塞进一个 .marquee__group，再让整组循环移动。基础版 HTML 里已经演示了这个结构，你只需要在组内继续追加任意数量的 span / a，并把间距控制起来：

css复制.marquee__group {
  gap: 32px;
  padding-right: 32px;
}

注意：组内每条之间的间距会直接影响整条滚动的视觉均匀度。如果想让每条消息之间形成清晰间隔，建议统一用 gap 控制，并且让第一个和最后一个相邻位置也能形成同样的空隙，所以容器右内边距也要等于 gap 值。如果不加这个右 padding，第一个消息和第二份内容的第一个消息会贴在一起，循环边界处能看出一个明显“缺了一截”的缝隙。

4.2 竖向滚动：换一个坐标轴就行

竖向走马灯的需求相对少一些，但也不是没有，比如页面侧边栏的“近期订单提醒”。竖向实现的关键不是把 translateX 改成 translateY 这么简单，还牵涉到可视高度约束和内容换行逻辑。核心代码：

css复制.marquee {
  height: 120px; /* 只露出这么高的可视区域 */
  overflow: hidden;
}

.marquee__track {
  display: flex;
  flex-direction: column;
  width: max-content;
  height: max-content;
  animation: marqueeScrollY 8s linear infinite;
}

.marquee__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 8px;
}

@keyframes marqueeScrollY {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

横线变细线差别不大，不过有一个细节必须处理：如果每条消息可能会超过一行，你需要给消息一个明确的宽度（比如 max-width: 280px）或者预设容器宽度，并启用 ellipsis 截断，否则竖向占的高度会变化很大，导致“一份内容”的高度不稳定，动画循环速度也会跟着变。

4.3 两个模块同时滚：一个全局公用的动画类

页面里同时出现两个滚动区域，比如顶部一条公告、中部一条跑马字幕，代码复用的方式不是复制两份 CSS，而是抽出公用的轨道类，再把动画时长差异交给自定义属性或独立 class 去控制。

css复制.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll var(--duration, 24s) linear infinite;
}

.marquee__track--slow {
  --duration: 40s;
}

.marquee__track--fast {
  --duration: 16s;
}

.marquee__track--reverse {
  animation-direction: reverse;
}

不同模块只要套上不同修饰类就能得到不同节奏。甚至可以把方向也做成变量展示：--direction 配合翻转 transform 的写法比较绕，通常会直接使用 animation-direction: reverse 实现右移效果。需要留意的是 reverse 会改变 keyframes 的起点终点语义，不过因为两端都是同一内容组，整体上反向平滑度依然成立。

4.4 一小段文字但要占满半个屏幕宽度怎么办

有的现场大屏页面会用一条很短的标题（比如“欢迎光临”四个字）做循环走马灯，内容宽度可能只有 200px，而可视窗口宽度是 1920px。这时候如果只复制两份，滚动到末尾阶段时视口里会出现一大片空白，因为第二份内容也已经完全滚出了屏幕。

解决方案是：把内容复制更多份，比如 6 份，再让轨道宽度足够覆盖视口的任意截图时刻。这里不需要改成 3 份、4 份慢慢试，可以用一个简单暴力的原则：复制数量乘以内容总宽度要大于视口宽度和一份内容宽度之和，最好直接复制到总宽度超过视口 2 倍以上。动画位移的百分比跟着改，比如轨道里有 6 组，终点写 translateX(-16.6667%) 而不是 -50%，这样每循环一次只前移一组的位置，视觉上依然无缝。

5. 真实项目避免不了的细节问题：暂停、动态内容、低端机性能

基础动效出来后，真正拉高完成度的是各种边界情况。这块确实有很多从网上抄代码抄不到的经验，我按踩坑频率排序给你列出来。

5.1 鼠标悬停暂停：能不能只让动画停下来但内容不跳

交互上最常见的需求是鼠标移入时暂停滚动，方便用户点击公告里的链接。CSS 里内置了现成方案，不需要 JS：

css复制.marquee:hover .marquee__track {
  animation-play-state: paused;
}

但这里有个隐藏问题：暂停时如果正好处于动画循环的末尾，快要回到起点的那个临界点上，视觉上内容可能一半在第一份末尾、一半在第二份起始；恢复动画时直接从当前位置继续跑，看起来是顺滑的。正常情况下不会出现“跳变”，因为 animation-play-state: paused 是暂停在某个具体时间点上，而不是重置到开头，所以体验没问题。需要小心的是不要在 hover 情况下给轨道本体换一套不同的动画时长或 keyframes，那才会导致真正的闪跳。

鼠标移出时恢复播放同理，animation-play-state 切回 running 就行。如果你做的是点击“暂停/播放”按钮，也完全可以用同一个属性切换，不会打断动画进度。

5.2 内容动态加载后，轨道宽度变了，动画速度会突变吗

这是很多人没预料到的问题：如果滚动轨道里内容条数不变但文本长度动态更新，动画时长是写死的话，内容变长，视觉速度就会变快；内容变短，速度又会变慢。要稳定匀速，最好的办法是让动画时长跟随内容总宽度同步更新。

做法是写一个小函数，每次更新 DOM 后测量轨道的真实宽度，再根据一个约定的速度（比如每秒 80px）动态设置 CSS 变量：

javascript复制const track = document.querySelector('.marquee__track');
const speed = 80; // px/s

function updateDuration() {
  const width = track.scrollWidth;
  track.style.animationDuration = `${width / 2 / speed}s`;
}

updateDuration();

为什么除以 2？因为动画循环要走的是“一份内容”的宽度，轨道总宽等于两份内容宽度，所以实际移动距离是 scrollWidth / 2。这个细节会让你的代码在一堆“写死 20s”的答案里显得更专业。

5.3 内容和轨道都用 transform，为什么不建议用 margin-left 或 left 驱动

有些从 jQuery 时代过来的老代码会用 setInterval 把 margin-left 一点点减下去，效果乍看没什么问题，但只要同时滚动几条长内容，页面就会偶发掉帧。

原因是 margin-left、top、left 这些几何属性变化时，浏览器需要触发布局计算，随后再做绘制和合成；而 transform 的变化会直接把元素挪到合成层，不触发后续元素的回流。这个差别在大屏活动页面、低端手机上非常明显。

所以轨道动画只推荐两种驱动方式：transform: translateX/translateY 完成直线位移；如果做更复杂的曲线路径，用 offset-path。千万不用 margin-left 硬怼，也不能给轨道外层容器直接加 transition 再靠 JS 去改 transform，那样时间线不如 CSS animation 精准，还平白引入 JS 参与的复杂度。

5.4 低端机和电池模式：如何避免滚动掉帧与页面发烫

走马灯动画本质是持续性的合成动画，一直跑会占用一定 GPU/CPU 资源。在性能有限的设备上做好这两点，能大幅降低卡顿概率：

第一，动画层尽量扁平。不要给轨道里面动辄几十上百个元素逐个设置 transition 或 will-change: transform，这样做会产生大量合成层，内存反而被撑爆。要让合成层集中在 .marquee__track 这一个元素上就够了。

第二，轨道内容不要放高清大图。如果走马灯里要放商品封面或头像，记得把图片尺寸先压缩，滚动过程中再加载原图不仅白费流量，还会在滚动时引起抢占主线程的解码。

第三，考虑在系统开启“减少动态效果”时主动降级。用户偏好可以通过媒体查询拿到：

css复制@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
    transform: none;
  }
}

这个写法不是花架子，而是能够在无障碍层面避免一部分用户因为界面持续滚动产生眩晕感，作为公共样式也很容易被团队其他成员沿用。

6. 如果这是一道面试题：主考官其实在问几层东西

走马灯这几年高频出现在前端面试里，正好也和很多人的“八股文”复习重合了。说句实在话，面试官不会因为你会背 animation 的十个属性就给你过，他想从这道题里看出三件事：有没有自己的实现思路、懂不懂动画的原理、遇到性能问题迹象后有没有排查方向。我把常见的追问整理了一遍，你把它作为自查清单看就好：

追问一：为什么不用 <marquee> 标签？

要答到“它不是标准标签”“控制能力弱”“浏览器行为不一致”“不利于扩展”这几个层面上，而不是只扔一句“太老了”。

追问二：为什么内容要复制两份？复制一份行不行？

只复制一份时，动画滚到末尾之后画面会出现空白，循环体验断裂。复制两份后，只要能保证动画位移距离等于一份内容宽度，画面首尾就能自然衔接。

追问三：translateX(-50%) 中的百分比基于谁？

基于执行动画的轨道元素自身宽度。如果轨道里是两份内容，就对应一份内容宽度；如果放了三份内容，要换算成 33.333...%，这一点能体现对 CSS 单位和动画底层逻辑的理解。

追问四：始终匀速运动要用哪个缓动函数？

animation-timing-function: linear。有人直接写 marqueeScroll 4s ease-in-out infinite，结果滚动速度忽快忽慢，像坐过山车。

追问五：怎么让不停跑的动画省电、不卡？

方向是：用 transform 触发合成层；避免大范围回流；不创建过多合成层；必要时监听可见性暂停。

追问六：内容从接口里异步拉回来，走马灯如何更新？

重渲染后同步更新两组内容的 DOM，再测量轨道宽度动态调整动画时长，避免位移量和内容宽度不匹配导致滚动断档。

以上这些都是我在实际项目里被问到过、或者自己排查过的点。走马灯表面是考动画，实际上是在考察布局、CSS 单位、合成器认知和交互细节。这也是我建议每一个前端都亲手从零写一遍这个效果的原因，因为网上模板许多都只解决了“能跑”，没有解决“跑得好”。

如果要给一个经验建议，我会说：第一次做走马灯时直接在浏览器里打开控制台，分别关掉 width: max-content、去掉 flex-shrink: 0、把位移量改成 -100%，每一个错误都亲眼看一遍现象，再回到代码里体会原理。经历过这几轮踩坑后，再听到“走马灯”这个词，它就不是需要背的题，而是能信手拈来的基本功了。