现代 marquee 替代方案：CSS 滚动文字 + 生成器

为什么 `<marquee>` 被废弃？

`<marquee>` 不符合现代语义与可访问性实践，缺少对用户动效偏好、响应式和可维护性的良好支持。CSS 动画方案更可控，也更符合当前标准。

现代 CSS 替代方案

常见做法是 `@keyframes` + `animation`，外层容器 `overflow: hidden`。这样你可以精确控制时长、方向、字体，并结合 reduced-motion 做无障碍适配。

纯 HTML/CSS 滚动文字代码

可直接复制，用于替换旧版 marquee。

<div class="marquee-wrap">
  <p class="marquee-text">Your scrolling text goes here</p>
</div>

<style>
  .marquee-wrap {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background: #111;
    color: #fff;
    padding: 8px 0;
  }

  .marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 12s linear infinite;
  }

  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
</style>

什么时候该用生成器而不是手写 CSS

当你需要所见即所得预览、透明背景导出、长字幕/片尾、透视滚动或可复用嵌入代码时，生成器更高效。