本文详解如何通过 CSS transform + 精确宽度控制实现真正无缝、无间隙、无卡顿的横向滚动字幕（marquee），彻底解决传统 left 位移动画导致的空白、跳帧与重复内容错位问题。
本文详解如何通过 css `transform` + 精确宽度控制实现真正无缝、无间隙、无卡顿的横向滚动字幕（marquee），彻底解决传统 `left` 位移动画导致的空白、跳帧与重复内容错位问题。
在现代 Web 开发中，<marquee> 标签早已被废弃，但业务场景中仍常需实现「无限循环横向滚动」效果（如新闻跑马灯、品牌标语轮播、实时状态条等）。许多开发者尝试用 left + position: relative 或 margin-left 配合 @keyframes 实现，却频繁遭遇滚动末尾出现空白间隙、动画卡顿、多段文本衔接断裂等问题——根本原因在于：left: -100% 仅粗略位移容器自身宽度，而未考虑子元素实际渲染宽度，导致位移终点与起始点无法视觉对齐。
✅ 正确解法是：基于 transform: translateX() 的像素级精准位移 + 单元封装 + 无缝拼接结构。核心思路是将滚动内容组织为「可平铺的最小单元」，让动画只移动一个单元的距离，再通过重复渲染该单元实现无限循环视觉效果。
✅ 推荐结构与关键代码
<div class="marquee">
<div class="marquee-track">
<div class="marquee-item">
<p class="marq">Hello it's me Mario</p>
<p class="asterisk marq">...</p>
</div>
<!-- 复制一次，形成无缝衔接 -->
<div class="marquee-item">
<p class="marq">Hello it's me Mario</p>
<p class="asterisk marq">...</p>
</div>
</div>
</div>.marquee {
width: 100vw;
height: 50px;
overflow: hidden;
white-space: nowrap;
}
.marquee-track {
display: inline-flex;
animation: scroll 8s linear infinite;
}
.marquee-item {
display: flex;
align-items: center;
gap: 16px; /* 控制段落间距 */
}
.marq {
font-family: monospace;
font-weight: 900;
text-transform: uppercase;
font-size: 20px;
margin: 0;
}
.asterisk {
color: #ff6b6b;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-274px); /* ⚠️ 关键：必须等于 .marquee-item 的精确宽度 */
}
}? 如何获取 .marquee-item 的精确宽度？可在浏览器 DevTools 中选中该元素，查看 Computed → width（含 padding/margin/border），或使用 getBoundingClientRect().width 动态计算。示例中 274px = 文本宽度 + 间隙 + 内边距之和。
⚠️ 注意事项与最佳实践
- 禁止使用 left / margin-left 动画：它们会触发重排（reflow），性能差且难以像素对齐；transform 仅触发合成，硬件加速，更流畅。
- 务必复制内容单元（至少两次）：单个单元动画结束后会立刻跳回起点，产生明显“闪回”；双单元可保证动画结束时第二个单元已就位，实现视觉无缝。
- 避免设置 .marquee-track 的固定 width 或 overflow: hidden：它应由子项自然撑开，否则会截断内容或干扰 inline-flex 布局。
-
响应式适配建议：若需适配不同屏幕，可用 CSS ch 单位或 JS 动态重设 translateX 距离，例如：
const item = document.querySelector('.marquee-item'); const width = item.getBoundingClientRect().width; document.documentElement.style.setProperty('--marquee-width', `${width}px`);并在 CSS 中使用 transform: translateX(calc(-1 * var(--marquee-width)));
立即学习“前端免费学习笔记（深入）”；
✅ 总结
一个真正专业的 marquee 不是“能动就行”，而是零感知的持续流动。它依赖三点：
① 结构上 —— 将内容封装为可复用、可测量的 .marquee-item；
② 动画上 —— 使用 transform: translateX() + 精确像素终点值；
③ 布局上 —— 用 inline-flex 替代 inline-block，消除默认间距，并通过双单元复制掩盖动画周期边界。
按此方案实现，即可告别闪烁、空白与卡顿，交付丝滑、专业、可维护的滚动体验。
