使用CSS的@keyframes和transform: translateX()可实现高性能跑马灯效果，通过overflow: hidden隐藏溢出内容，white-space: nowrap防止换行，结合animation实现从右向左的连续滚动；进阶方案可通过双倍文本配合translateX(-50%)实现无缝滚动，适用于通知栏、榜单等场景，无需JavaScript即可完成。
要实现文字滚动的跑马灯效果，可以使用 CSS 的 @keyframes 和 transform: translateX() 配合完成。这种方式性能好、兼容性高，适合在 banner、通知栏、榜单等场景中使用。
基本原理
通过定义关键帧动画，让文本容器从右向左平移（或反之），实现连续滚动的效果。核心是利用 translateX 控制元素水平位移，并结合容器的溢出隐藏（overflow: hidden）来制造“跑动”的视觉感。
HTML 结构
欢迎访问我们的网站！最新活动火热进行中，点击了解更多详情……
CSS 样式与动画实现
设置外层容器限制宽度并隐藏溢出，内层文本设置白空间不换行，并通过 keyframes 定义从右到左的平移动画。
立即学习“前端免费学习笔记（深入）”；
.marquee-container {
width: 100%;
max-width: 800px;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
background-color: #f0f0f0;
padding: 10px;
border-radius: 4px;
}
.marquee-text {
display: inline-block;
font-size: 18px;
color: #333;
animation: marqueeAnimation 10s linear infinite;
}
@keyframes marqueeAnimation {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
关键点说明
- overflow: hidden：确保文本超出容器的部分被隐藏，形成“进入/离开”视觉效果。
- white-space: nowrap：防止文本自动换行，保持一行显示。
- display: inline-block：使文本内容可被整体移动。
- translateX(100%) → translateX(-100%)：从右侧完全进入，移动到左侧完全离开。
- animation-timing-function: linear：保证滚动速度均匀。
- infinite：实现无限循环滚动。
进阶优化：无缝滚动
如果希望实现更平滑的无缝滚动（比如文本重复出现），可以通过复制内容或使用伪元素扩展长度，再调整动画距离。
立即学习“前端免费学习笔记（深入）”；
/* 示例：双倍文本无缝滚动 */
.marquee-text {
animation: marqueeSmooth 12s linear infinite;
white-space: nowrap;
}
@keyframes marqueeSmooth {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/ 需配合将内容重复一次，或用 JS 动态生成双倍宽度 /
基本上就这些。使用 keyframes 和 translateX 实现跑马灯简单高效，无需 JavaScript，适合大多数静态滚动需求。注意控制动画时长以适应文本长度，避免过快或过慢影响阅读体验。
