HTML5如何批量生成滚动文字_用模板字符串循环插入DOM【方法】-html教程

不推荐使用marquee标签，HTML5已废弃；应采用CSS动画或JavaScript实现滚动，前者轻量高效，后者更灵活可控。

滚动文字用 marquee 标签还行吗？

不行。HTML5 已废弃 marquee，现代浏览器虽多数仍能渲染，但不保证兼容性，且无法精准控制速度、暂停、方向等行为。W3C 明确不推荐，CSS 动画或 JavaScript 才是正解。

用 CSS @keyframes + animation 实现批量滚动

这是最轻量、性能最好、也最容易批量生成的方式。核心思路是：用 JS 拼接 HTML 字符串（模板字符串），插入容器，再靠 CSS 统一驱动滚动动画。

• 滚动容器必须设 white-space: nowrap 和固定宽度/溢出隐藏
• 每个滚动项需包裹在独立 或
  中，并设 display: inline-block 避免换行挤压

• 动画时长和延迟要根据文字长度动态计算，否则短文本会“闪退”，长文本会卡顿

const texts = ['前端开发', 'React 19', 'TypeScript 5.4', 'Vite 5'];
const container = document.getElementById('ticker');
const html = texts.map((text, i) => `
  ${text}
`).join('');
container.innerHTML = html;

CSS 部分需配合：

@keyframes ticker-move {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.ticker-item {
  display: inline-block;
  margin-right: 2rem;
  animation: ticker-move 15s linear infinite;
  animation-delay: var(--delay);
}

用 requestAnimationFrame 手动滚动更可控

当需要响应鼠标悬停暂停、点击跳转、或与滚动位置联动时，CSS 方案不够灵活。此时应改用 JS 控制位移，模板字符串依然用于初始 DOM 插入，但后续靠帧循环更新 transform。

立即学习“前端免费学习笔记（深入）”；