无需登录 数据私有 本地保存

滚动文字横幅生成器 - 替代 marquee 标签

CSS 设计工具 CSS 文字 横幅 滚动
52
0
0
0

滚动文字横幅生成器

替代已废弃的 <marquee> 标签，使用纯 CSS 动画实现平滑滚动横幅

配置面板
快适中慢
实时预览
调整左侧参数查看预览效果
生成的代码
常见问题与知识点

<marquee> 是早期 HTML 中用于创建滚动文字效果的非标准标签，最早由微软在 Internet Explorer 中引入。它在 HTML5 规范中已被标记为废弃（deprecated），主要原因包括：

• 非标准实现：从未被 W3C 正式纳入规范，各浏览器表现不一致。
• 无障碍性差：屏幕阅读器难以正确解析滚动内容，影响残障用户体验。
• 性能问题：持续的滚动会不必要地消耗 CPU 资源。
• 用户体验：过度使用会分散注意力，且无法通过 CSS 灵活控制。

现代替代方案是使用 CSS animation 配合 @keyframes，既能实现相同效果，又具备更好的可控性和兼容性。

实现无缝循环的关键技巧是复制一份相同内容，然后使用 CSS 动画移动恰好 50% 的距离：

1. 在容器内放置两份相同的文字内容（用分隔符隔开）。
2. 使用 display: inline-block 或 flex 让内容横向排列。
3. 设置 white-space: nowrap 防止换行。
4. 使用 @keyframes 定义 translateX(0) 到 translateX(-50%) 的动画。
5. 容器设置 overflow: hidden 隐藏超出部分。

这样当第一份文字完全滚出时，第二份文字恰好接上，形成无缝循环。本工具生成的代码已包含完整实现。

使用 CSS 动画实现的滚动文字对 SEO 基本没有负面影响，因为：

• 文字内容仍然存在于 HTML DOM 中，搜索引擎可以正常抓取和索引。
• CSS 动画不会改变 HTML 结构，只是视觉上的呈现方式。
• 与 JavaScript 动态插入内容不同，CSS 动画中的文字是静态 HTML 的一部分。

不过需要注意的是：不要在滚动文字中堆砌关键词，这会被搜索引擎视为垃圾内容。保持文字简洁、有价值，像普通内容一样对待即可。另外，重要信息建议同时以静态形式呈现，确保所有用户都能看到。

移动端使用滚动横幅时应注意以下几点：

• 字体大小：移动端屏幕较小，字体建议 14-16px 以上，确保可读性。
• 触摸交互：确保悬停暂停功能在移动端有替代方案（如触摸时暂停）。
• 性能优化：使用 will-change: transform 和 transform（而非 left/top）来触发 GPU 加速。
• 响应式容器：使用百分比宽度或 max-width，让横幅自适应不同屏幕。
• 带宽考虑：避免在滚动横幅中使用大背景图，影响加载速度。

本工具生成的代码已针对移动端做了优化，使用 transform 进行动画，性能表现良好。

有多种方式可以控制滚动行为：

• 悬停暂停：使用 .marquee-container:hover .marquee-content { animation-play-state: paused; }。
• JavaScript 控制：通过 JS 动态添加/移除动画类，或修改 animation-play-state 属性。
• 媒体查询：在小屏幕设备上降低滚动速度或完全禁用滚动。
• prefers-reduced-motion：响应系统"减少动画"设置，为有运动敏感的用户提供静态版本。

推荐在项目中加入对 prefers-reduced-motion 媒体查询的支持，体现对无障碍访问的重视。

推荐使用 CSS 动画，原因如下：

• 性能更优：CSS 动画由浏览器合成器线程处理，不阻塞主线程，帧率更稳定。
• GPU 加速：transform 动画自动触发 GPU 加速，CPU 占用低。
• 代码更简洁：无需定时器或 requestAnimationFrame，声明式语法更易维护。
• 电池友好：移动设备上 CSS 动画更省电。

JavaScript 滚动（如使用 setInterval 或 scrollLeft）容易导致布局抖动和性能问题，仅在需要复杂交互逻辑时才考虑使用。对于大多数横幅滚动场景，CSS 动画是最佳选择。
🔧 相关工具