如何实现无缝无限滚动文字跑马灯效果（CSS + 动态时长控制）-html教程-PHP中文网

如何实现无缝无限滚动文字跑马灯效果（CSS + 动态时长控制）

本文详解如何通过 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 计算逻辑完全匹配：

CSS婚礼策划服务机构宣传网站模板

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

下载

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% 立即将其置于右侧外 → 实现像素级无缝衔接。