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

滚动文字条生成器 - 股票/新闻跑马灯

14
1
0
1
实时预览
上证指数 3,265.76 ↑1.23%  |  深证成指 10,523.45 ↑2.15%  |  创业板指 2,156.78 ↑3.02%  |  沪深300 4,102.33 ↑0.89% 上证指数 3,265.76 ↑1.23%  |  深证成指 10,523.45 ↑2.15%  |  创业板指 2,156.78 ↑3.02%  |  沪深300 4,102.33 ↑0.89%
预设模板：
慢中快
鼠标悬停时暂停动画
实时预览中
常见问题与知识点

跑马灯（Marquee）是一种文本在固定区域内自动滚动的视觉效果。常见应用包括：股票行情条（实时显示指数涨跌）、新闻快讯栏（滚动播报最新消息）、网站公告（重要通知滚动展示）、电商促销条（限时优惠滚动播放）。跑马灯能有效吸引用户注意力，在有限空间内展示更多信息。

<marquee> 标签已在 HTML5 中被废弃，虽然大多数浏览器仍兼容，但不推荐使用。原因包括：① 不符合现代Web标准；② 无法精细控制动画参数；③ 部分移动端浏览器支持不佳；④ 不利于SEO。推荐使用 CSS animation + transform 实现，性能更好、可控性更强，且支持GPU加速，滚动更流畅。

无缝滚动的核心是内容双份复制 + translateX(-50%)。将同一段文字复制两份放入轨道容器，动画从 translateX(0) 移动到 translateX(-50%)。当第一份文字完全滚出视野时，第二份文字恰好填补到起始位置，视觉上形成完美无缝循环。关键点：两份文字之间的间距需保持一致，动画时间与移动距离成正比。

移动端优化要点：① 使用 will-change: transform 提示浏览器优化；② 避免使用 left/top 属性，改用 transform: translateX() 利用GPU加速；③ 设置合理的字体大小（建议14-20px）；④ 使用 white-space: nowrap 防止文字换行。CSS animation 方式的跑马灯对性能影响极小，即使长时间运行也不会造成页面卡顿。

使用CSS animation-play-state: paused 配合 :hover 伪类即可实现悬停暂停。这显著提升了用户体验：用户可以仔细阅读感兴趣的滚动内容，无需等待下一轮循环。本工具生成的代码默认包含此功能。也可通过JS监听 mouseenter/mouseleave 事件实现更灵活的控制。

跑马灯内容通常会被搜索引擎正常抓取，因为文字存在于HTML结构中。但需注意：① 避免将核心关键词仅放在跑马灯中，应配合静态标题和meta标签；② 跑马灯文字应语义化（使用span或div，而非canvas绘制）；③ 重要信息建议同时在页面其他位置静态展示；④ 跑马灯适合展示时效性内容（如实时行情），这反而能提升页面新鲜度，对SEO有利。

常见原因及解决方法：① 未使用transform：改用 transform: translateX() 而非修改left属性；② 动画帧率不稳：确保使用 linear 时序函数；③ 文字过长：超长文字增加DOM负担，建议单条跑马灯文字不超过500字符；④ 多层嵌套：减少不必要的DOM层级；⑤ 低端设备：适当降低动画速度或增大字体减少渲染压力。
🔧 相关工具