本文详解如何通过 width: fit-content 配合 left 与 transform: translateX() 精确控制，解决传统 marquee 因固定宽度导致的视觉断层问题，并结合 JavaScript 动态计算动画时长，确保不同长度文本保持恒定滚动速度。
本文详解如何通过 `width: fit-content` 配合 `left` 与 `transform: translatex()` 精确控制，解决传统 marquee 因固定宽度导致的视觉断层问题，并结合 javascript 动态计算动画时长，确保不同长度文本保持恒定滚动速度。
实现真正无缝的无限滚动文字（marquee），关键在于让动画结束帧与起始帧在视觉上完全衔接——即当文字完全滑出左侧边界时，应立即从右侧重新出现，中间无停顿或空白间隙。常见错误是将 .marqueeText 设置为 width: 100%，这使其宽度等于父容器（如 .marquee），而实际文本内容远窄于该宽度，导致动画位移距离过大、停留空白时间过长（如原文中 6–7 秒黑屏）。
✅ 正确方案：基于内容宽度动态定位
核心思路是：让元素宽度真实反映文本长度（width: fit-content），再通过 left + transform 实现精准位移：
- 起始状态：left: 100%（文本右边缘与容器右边界对齐，整体完全在视口右侧）
- 结束状态：left: 0; transform: translateX(-100%)（-100% 指自身宽度的 100%，即向左平移整个文本长度，使其左边缘刚好抵达容器左边界；此时文本完全滑出视口左侧）
这样，动画位移总距离 = 文本自身宽度 + 容器宽度，与 JS 计算逻辑完全匹配：
const timePerPixel = 5; // 每像素滚动耗时（ms）
const containerWidth = 1120; // 容器可视宽度（px）
const text = document.getElementById('marqueeText');
const textWidth = text.scrollWidth; // 推荐用 scrollWidth 更可靠（含 padding/border）
const distance = textWidth + containerWidth;
const duration = timePerPixel * distance;
text.style.animationDuration = `${duration}ms`;⚠️ 注意：offsetWidth 在元素未渲染完成时可能返回 0，推荐使用 scrollWidth 获取真实内容宽度；若需兼容旧浏览器，可加 requestAnimationFrame 确保 DOM 渲染后读取。
立即学习“前端免费学习笔记（深入）”；
? 完整 CSS 代码（关键修正点已高亮）
@keyframes marquee-animation {
from {
left: 100%;
transform: translateX(0);
}
to {
left: 0;
transform: translateX(-100%); /* -100% 是相对于自身宽度！ */
}
}
.topmarquee {
width: 100%;
border: 1px solid #000;
}
.topmarquee .marquee {
width: calc(100% - 200px); /* 根据布局调整 */
position: relative;
overflow: hidden;
height: 31px;
}
.topmarquee .marquee #marqueeText {
display: block;
position: absolute;
top: 0;
margin: 0;
white-space: nowrap;
line-height: 31px;
/* 关键：宽度自适应文本内容 */
width: fit-content;
/* 关键：初始位置在右侧外 */
left: 100%;
transform: translateX(0);
animation-name: marquee-animation;
animation-iteration-count: infinite;
animation-timing-function: linear;
}✅ HTML 结构（保持简洁）
<div class="d-none d-lg-flex row topmarquee mt-4">
<div class="marquee">
<p id="marqueeText" class="marqueeText mb-0">
This is a test website
</p>
</div>
</div>? 为什么 fit-content + left/translateX 更可靠？
- width: 100% 强制拉伸元素，使 translateX(-100%) 实际位移为容器宽度，而非文本宽度 → 位移过量 → 出现空白期；
- width: fit-content 让元素仅占文本所需空间，translateX(-100%) 精确移动自身全长 → 动画结束时，文本左缘刚好到达容器左缘，下一循环 left: 100% 立即将其置于右侧外 → 实现像素级无缝衔接。
? 进阶建议
- 若需多行或复杂样式，可将 <p> 替换为 <span> 并设 display: inline-block，同样适用 fit-content；
- 响应式场景下，监听 window.resize 事件并重置 animationDuration，确保不同屏幕宽度下速度一致；
- 对于超长文本，可添加 font-size: clamp(1rem, 2.5vw, 1.2rem) 保证可读性与布局稳定。
至此，你已掌握构建专业级无缝跑马灯的核心技术：内容驱动宽度 + 精确双轴定位 + 动态时长适配。无需依赖第三方库，纯 CSS + 轻量 JS 即可交付高性能、高一致性滚动体验。
