滚动文字生成工具

输入文字并设置方向、速度和样式,预览滚动效果并生成可复制的 HTML/CSS 代码。

输入与设置
滚动方向
结果与操作
等待输入或载入示例。
效果预览
预览不可用时仍可复制下面的 HTML/CSS。
文本行数
0
一轮秒数
0
字号
0
内边距
0

了解更多

使用方法

粘贴文本并设置选项,然后点击“生成滚动文字”;确认结果后可复制或下载。

实现原理与边界

核心层把文本转义为安全 HTML,并根据方向生成 translateX/translateY 动画代码;预览层只通过 `textContent` 设置用户文本,再用 CSS 自定义属性控制动画。

常见问题
滚动越快应该怎样设置?

减小“一轮时长”即可加快移动;时长表示完成一次滚动所需的秒数。

可以垂直滚动多行文字吗?

可以。选择向上或向下时,多行文本会作为同一内容块沿垂直方向移动。

系统开启“减少动态效果”会怎样?

页面预览和导出的代码都提供 prefers-reduced-motion 降级,在用户要求减少动画时停止持续滚动。

隐私、限制与来源

所有文本处理均在当前浏览器本地完成,不上传输入,不调用第三方运行接口。

滚动代码用于普通展示效果,不适合作为关键可读信息的唯一呈现方式。持续动画可能影响可访问性,因此必须保留 reduced-motion 降级和静态文字替代。

MDN:CSS animation