如何实现响应式且速度恒定的现代 CSS 滚动字幕（Marquee）-html教程-PHP中文网

如何实现响应式且速度恒定的现代 CSS 滚动字幕（Marquee）

本文介绍一种不依赖标签、无需 jQuery 的纯 CSS + 轻量 JS 方案，通过动态计算内容宽度并配合双副本平滑位移，实现响应式环境下滚动速度恒定、内容完整显示的现代字幕效果。

本文介绍一种不依赖 `` 标签、无需 jquery 的纯 css + 轻量 js 方案，通过动态计算内容宽度并配合双副本平滑位移，实现响应式环境下滚动速度恒定、内容完整显示的现代字幕效果。

在构建响应式滚动字幕时，核心挑战在于：既要保证内容完整连续滚动（无跳变、无截断），又要维持视觉速度恒定——无论视口尺寸如何变化，也无论客户输入多少文字。原生已废弃，而常见纯 CSS 方案（如 transform: translateX(-100%)）往往因动画周期固定，导致内容越长滚动越慢、越短越快，违背“恒速”需求。

✅ 解决方案关键设计

双副本无缝衔接机制
将内容复制至少两遍（推荐 2–3 倍），配合 transform: translateX(-50%) 实现视觉上无限循环：当第一份内容完全移出左边界时，第二份恰好补位，消除跳跃感。这是实现“无中断滚动”的基础。
动态动画时长计算（JS 辅助）
CSS 本身无法获取元素实际渲染宽度，因此需用极简 JS 获取 .duck 的 offsetWidth 或 getComputedStyle().width，并将其注入 CSS 自定义属性（如 --w），再通过 calc() 动态生成动画周期：
```
animation: scroll-left calc(var(--s) * var(--w) / 2000) linear infinite;
```
其中 --s: 10s 表示“理想状态下滚动 2000px 所需时间”，--w 是实际宽度（单位 px），从而确保像素级移动速度恒定（例如始终为 200px/s）。

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

下载
弹性布局与最小宽度兜底
使用 display: flex; justify-content: space-around 均匀分布子项，并设置 min-width: 200vw 防止小屏下内容被过度压缩或单字断裂，兼顾可读性与响应性。

✅ 完整可运行代码

<div class="pizza">
  <p class="duck">
    <span class="red">Start Lorem ipsum dolor sit amet...</span>
    <span class="green">Start Lorem ipsum dolor sit amet...</span>
    <span class="blue">Start Lorem ipsum dolor sit amet...</span>
    <!-- 至少重复一次，确保无缝衔接 -->
    <span class="red">Start Lorem ipsum dolor sit amet...</span>
    <span class="green">Start Lorem ipsum dolor sit amet...</span>
    <span class="blue">Start Lorem ipsum dolor sit amet...</span>
  </p>
</div>

/* 文字样式 */
.red { color: red; }
.green { color: green; }
.blue { color: blue; }

/* 容器：隐藏溢出、禁止换行 */
.pizza {
  line-height: 60px;
  font-size: 16px;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

/* 滚动主体：flex 布局 + 动态动画 */
p.duck {
  display: flex;
  justify-content: space-around;
  --s: 10s; /* 基准速度：滚动 2000px 用 10 秒 → 200px/s */
  animation: scroll-left calc(var(--s) * var(--w) / 2000) linear infinite;
  width: fit-content;
  min-width: 200vw; /* 防小屏塌陷 */
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 关键！非 -100% */
}

p.duck:hover {
  animation-play-state: paused;
}

// 动态注入宽度变量（兼容 resize）
function setUp() {
  const duck = document.querySelector('.duck');
  if (duck) {
    const widthPx = parseFloat(getComputedStyle(duck).width);
    duck.style.setProperty('--w', widthPx);
  }
}
window.addEventListener('load', setUp);
window.addEventListener('resize', setUp);

⚠️ 注意事项与优化建议

内容复制策略：务必确保内容重复 ≥2 次，且所有保持相同结构与样式，避免因 DOM 差异导致位移错位。
性能考量：该方案全程使用 transform 和 will-change: transform（可手动添加）触发 GPU 加速，无重排（reflow），适合长文本。
无障碍（a11y）提醒：自动滚动可能影响部分用户，建议添加 prefers-reduced-motion 查询，在系统开启“减少运动”时暂停动画：
```
@media (prefers-reduced-motion: reduce) {
  p.duck { animation-play-state: paused; }
}
```
替代方案权衡：若项目已引入 Vue/React，可考虑用 IntersectionObserver 实现更精细的滚动控制；但对静态站点，本方案以最小 JS 代价达成最佳平衡。