Softonic

滚动文本生成器

步 1 / 2
下一步

滚动标题是一种通过公告栏、股票代码条及事件横幅在屏幕窄区域内呈现大量信息的技术方案。该生成器采用纯 CSS 的@keyframes与transform: translateX()动画重新实现了经典的 HTML <marquee>效果，因此这一技术无需使用已弃用的标签即可在所有现代浏览器中正常运行。选择所需内容、设置每轮循环的速度（以秒为单位）、调整颜色与字体大小，然后先实时预览滚动字幕，再用下方展示的 CSS 自行复现该效果。

如何创建滚动横幅

  1. 1

    输入消息

    输入标题。简短的行（4–10个单词）在动态条上显示效果最佳。

  2. 2

    选择速度

    滚动时间越短，滚动速度越快。对于新闻类滚动条而言，每完整循环30至60秒即可满足需求。

  3. 3

    设置颜色和大小

    为文本选择前景色，为滚动条选择背景色，并设置与标题高度相匹配的字体大小。

  4. 4

    实时预览

    演示画面实时呈现动画，让您在发布前即可判断文字的可读性。

  5. 5

    用 CSS 复现

    将下方展示的`@keyframes`与`transform: translateX()`模式复制到您自己的样式表中，即可在您的网站上复现该滚动字幕。

为何选择 CSS 动画而非 <marquee>

<marquee>标签在HTML5中已被弃用，并被 WHATWG 标记为过时。目前浏览器仍支持显示该标签，但无障碍工具和验证器对此提出批评，且用户无法精细控制动画的缓动与循环效果。使用现代工具处理overflow: hidden标签内的transform: translateX()动画时，其视觉表现完全一致。

调整速度

遍历所需时间取决于视口的持续时间和总宽度。对于1200像素的视口，可参考以下大致规则：

有效期 使用感受 常规使用场景
10–20秒 快速响应、高度专注 限时促销、紧急通知
30–45秒 新闻滚动条 实时比分、标题栏
60–90秒 环境氛围 会场标识、会议室
120秒以上 几乎不动 装饰性、奢侈品牌横幅

可访问性检查清单

  • 将条带包裹在role="marquee"或aria-live="off"中，以防止屏幕阅读器在每次循环时重复播报该消息。
  • 使用@media (prefers-reduced-motion: reduce) { animation: none; }降低运动幅度，并静态显示文本。
  • 确保文本与背景的对比度至少为4.5:1；动态文本比静态文本更难阅读。
  • 切勿将关键信息（法律声明、价格、错误提示）仅置于滚动条内。

常见问题

不。预览是一个包含 overflow: hidden 的 <div>，以及一个使用 translateX 控制内部跨度移动的 CSS 动画 @keyframes。该代码符合现代 HTML5 标准。

在容器的悬停选择器上添加animation-play-state: paused。部分用户认为这种方式比使用固定循环更为便捷。

是的。将@keyframes的末端值从translateX(-100%)更改为translateX(100%)，并从-100%开始反转方向。适用于RTL语言。

不。CSS转换在GPU上执行，而文本在DOM中均为普通HTML代码，因此爬虫可正常读取，动画也不会阻塞主线程。

预览时所有内容均保留在您的浏览器中，不会上传或记录任何数据。

相关工具

可复制的箭头符号

一键复制常用 Unicode 箭头：直线、双线、斜向、钩形、环形和三角样式，适合文档、聊天和设计。

小于或等于符号

复制 ≤ 符号及相关数学比较符号。包含适用于电子表格、论文和网页的 Unicode、HTML 实体及 LaTeX 标记。

域名生成器

根据一个关键词生成域名创意：在六种常见 TLD 中组合前缀、后缀、重复字母和数字结尾。

适合阅读障碍者的文本转换工具

将粘贴的文本重新排版为短段落和约72个字符的行，便于阅读。将结果复制到任何文档、邮件或编辑器中。

泰语数字转文字工具

在浏览器本地将最多 18 位数字写成泰语，或用 ASCII 数字或泰文数字将准确的泰铢和萨当金额写成文字，不进行舍入。

从文本中提取数字

从文本块中提取所有数字（包括整数、小数、带符号数值和货币值），去重后即可直接粘贴。

此工具还提供其他语言版本