← 返回导航

跑马灯效果

animations
欢迎使用 wjs-css-effects 跑马灯效果演示 · 纯 CSS 实现横向滚动文字 ·
基础跑马灯
✨ 无缝滚动 💜 紫粉主题 🎨 纯 CSS 实现 ⚡ 性能优化 ✨ 无缝滚动 💜 紫粉主题 🎨 纯 CSS 实现 ⚡ 性能优化
无缝衔接
🔔 公告：从右向左滚动 🎉 反向跑马灯效果 📢 新功能上线啦 🔔 公告：从右向左滚动 🎉 反向跑马灯效果 📢 新功能上线啦
反向滚动

第一条公告信息

第二条公告信息

第三条公告信息

第四条公告信息

第一条公告信息

垂直跑马灯

关键点

  • 跑马灯效果通过内容整体横向平移，实现无限滚动的文字或图片列表
  • 关键是将内容复制一份拼接，当第一份滚动完毕时第二份无缝衔接
  • 使用 transform: translateX() 从 0 移动到 -50%（因为内容是双份的），刚好一个循环
  • 设置 animation: linear infinite 匀速无限循环，实现连续滚动效果
  • 滚动速度由内容宽度和动画时长共同决定，通常每秒移动 50-100px 阅读舒适

效果说明

文字横向无限滚动的跑马灯效果。利用 transform: translateX() 配合 animation 实现文字循环滚动，通过重复内容实现首尾无缝衔接。这里展示 4 种变体：基础跑马灯、无缝衔接、反向滚动、垂直跑马灯。