滚动文字生成工具
输入文字并设置方向、速度和样式,预览滚动效果并生成可复制的 HTML/CSS 代码。
输入与设置
滚动方向
结果与操作
等待输入或载入示例。
效果预览
预览不可用时仍可复制下面的 HTML/CSS。
- 文本行数
- 0
- 一轮秒数
- 0
- 字号
- 0
- 内边距
- 0
了解更多
使用方法
粘贴文本并设置选项,然后点击“生成滚动文字”;确认结果后可复制或下载。
实现原理与边界
核心层把文本转义为安全 HTML,并根据方向生成 translateX/translateY 动画代码;预览层只通过 `textContent` 设置用户文本,再用 CSS 自定义属性控制动画。
常见问题
滚动越快应该怎样设置?
减小“一轮时长”即可加快移动;时长表示完成一次滚动所需的秒数。
可以垂直滚动多行文字吗?
可以。选择向上或向下时,多行文本会作为同一内容块沿垂直方向移动。
系统开启“减少动态效果”会怎样?
页面预览和导出的代码都提供 prefers-reduced-motion 降级,在用户要求减少动画时停止持续滚动。
隐私、限制与来源
所有文本处理均在当前浏览器本地完成,不上传输入,不调用第三方运行接口。
滚动代码用于普通展示效果,不适合作为关键可读信息的唯一呈现方式。持续动画可能影响可访问性,因此必须保留 reduced-motion 降级和静态文字替代。