要实现无缝跑马灯文字效果，核心是复制内容并配合css动画完成平滑位移，1. 使用html结构包含重复的文本内容以确保视觉衔接；2. 通过css设置容器overflow: hidden和white-space: nowrap隐藏溢出内容并防止换行；3. 利用padding-left: 100%将滚动内容起始位置移至容器右侧外；4. 定义@keyframes动画，从transform: translatex(0)到translatex(-100%)实现向左连续滚动；5. 应用animation属性设置线性无限循环动画，并通过:hover暂停提升可访问性；6. 添加will-change: transform优化渲染性能；7. 在响应式设计中根据屏幕尺寸调整动画速度或降级为静态显示；8. 对动态内容需用javascript控制动画启停与宽度计算以保证无缝效果，最终形成流畅、可控、兼容性好的跑马灯，完整实现现代web中替代传统marquee标签的优雅解决方案。
要用CSS制作跑马灯文字，核心是利用
@keyframes规则配合
transform: translateX()属性，让文字在容器内实现连续的水平位移，再通过
overflow: hidden裁剪超出部分，形成循环滚动的效果。
解决方案
制作一个基本的跑马灯文字效果，我们需要一个容器来限定显示区域，以及一个或多个文本元素在其中滚动。
HTML 结构：
立即学习“前端免费学习笔记（深入）”；
这是一个跑马灯文字示例，文字会从右向左滚动。 这是第二段内容，也可以跟着一起滚动。 这是一个跑马灯文字示例，文字会从右向左滚动。 这是第二段内容，也可以跟着一起滚动。
CSS 样式：
.marquee-container {
width: 100%; /* 或者固定宽度 */
overflow: hidden; /* 隐藏超出容器的内容 */
white-space: nowrap; /* 确保文字不换行 */
box-sizing: border-box; /* 边框和内边距包含在宽度内 */
border: 1px solid #ccc; /* 方便观察效果 */
padding: 10px 0;
position: relative; /* 为内容定位做准备 */
}
.marquee-content {
display: inline-block; /* 确保内容在同一行 */
padding-left: 100%; /* 从容器右侧完全移入开始 */
animation: scroll-left 15s linear infinite; /* 动画名称、时长、速度曲线、无限循环 */
/* 优化性能，提前告知浏览器此元素将进行位移 */
will-change: transform;
}
.marquee-content span {
display: inline-block; /* 确保每个span都在一行 */
margin-right: 50px; /* 文字之间的间距 */
}
/* 定义动画关键帧 */
@keyframes scroll-left {
0% {
transform: translateX(0%); /* 初始位置，内容完全在右侧 */
}
100% {
transform: translateX(-100%); /* 结束位置，内容完全在左侧，实现循环 */
}
}
/* 鼠标悬停时暂停动画 */
.marquee-container:hover .marquee-content {
animation-play-state: paused;
}这段代码通过将
.marquee-content的
padding-left设置为
100%，使其初始位置在容器右侧完全隐藏，然后通过
translateX(-100%)让它向左移动一个自身的宽度，从而实现内容从右到左的滚动。为了实现无缝循环，我在
marquee-content内部复制了一份内容，这样当第一份内容即将滚出屏幕时，第二份内容正好接上。
为什么传统的标签不推荐使用，以及CSS方案的优势在哪里？
说实话，每次看到网站还在用那个老旧的
标签，我心里都会咯噔一下。它确实能实现文字滚动，但那已经是上个世纪的产物了，在现代Web开发中几乎被完全弃用了。主要原因在于它的可访问性极差。想象一下，一个屏幕阅读器用户或者有视觉障碍的用户，面对一段不停滚动的文字，根本无法有效捕捉和阅读信息，这简直是灾难性的体验。而且，它也不是W3C标准的一部分，这意味着浏览器对其支持可能不稳定，或者未来会彻底移除。相比之下，CSS方案的优势简直是碾压式的。首先，它提供了精细到极致的控制。你可以调整动画的时长、速度曲线（
linear、
ease-in、
ease-out等）、延迟、循环次数，甚至可以控制动画在特定状态下暂停或反向。这些都是标签望尘莫及的。其次，CSS动画的性能通常更好。浏览器在处理CSS
transform属性时，很多时候可以利用GPU进行硬件加速，动画会显得更流畅，对CPU的负担也更小。最后，也是非常重要的一点，使用CSS意味着你保持了语义化的HTML结构，内容是内容，样式是样式，这符合现代Web开发的最佳实践，也更利于维护和响应式设计。对我个人而言，这种掌控感和灵活性是无法替代的。
如何让跑马灯文字实现无缝循环，避免突然跳动？
实现无缝循环是跑马灯效果的关键，也是很多人初次尝试时容易遇到“跳动”问题的地方。我见过不少朋友直接让文字从
transform: translateX(0)跑到
translateX(-100%)，结果就是当动画结束时，文字会突然“瞬移”回起点，非常突兀。
要解决这个问题，核心思路是让动画的起点和终点在视觉上衔接起来。最直接有效的方法是复制内容。比如，你的滚动内容是“你好，世界！”，那么在HTML结构里，你实际放入的可能是“你好，世界！你好，世界！”（或者更多份）。然后，让整个包含这些内容的元素进行位移。
具体来说，就是像我前面解决方案里展示的那样：
-
容器宽度固定，并设置
overflow: hidden;
。 -
滚动内容元素（
.marquee-content
）的宽度要大于容器的宽度，并且包含重复的文本。 -
动画的起始点：让滚动内容元素从容器的右侧完全移入开始。这可以通过给
.marquee-content
设置padding-left: 100%;
来实现，这样它的实际内容会从屏幕外开始。 -
动画的结束点：让滚动内容元素向左移动，直到第一份内容的末尾刚好滚出屏幕，同时第二份内容的开头正好进入屏幕。在我的例子中，
@keyframes
的100%
处设置为transform: translateX(-100%);
，这里的-100%
是相对于.marquee-content
自身宽度的位移。如果.marquee-content
的宽度恰好是其内部所有文本宽度之和的两倍（因为复制了一份），那么这个位移量就能保证无缝衔接。
这种方式的好处是，无论你的文字多长，只要你复制了足够多的份数，并且动画位移的距离和内容总长度匹配，就能实现视觉上的无限循环，没有丝毫的卡顿或跳跃感。它就像一个无限的传送带，文字源源不断地从一边出现，又从另一边消失。
在实际项目中应用跑马灯文字时，有哪些常见的陷阱和优化建议？
在实际项目中应用跑马灯文字，远不止写几行CSS那么简单，有很多细节需要考虑，否则可能会带来意想不到的问题。
首先，可访问性是重中之重。我之前提到过，不停滚动的文字对某些用户来说是阅读障碍。所以，一个基本的优化是提供暂停/播放功能。最简单的方式就是我代码里写的
:hover暂停，但更进一步，应该提供一个可见的按钮让用户手动控制。对于屏幕阅读器，可以考虑使用
aria-live="off"或
"polite"来控制其播报行为，并在内容重要时提供非滚动版本的替代信息。我个人觉得，如果信息非常重要，就不要用跑马灯了，或者至少提供一个静态的、易于阅读的版本。
其次是性能。虽然
transform通常性能不错，但如果你的跑马灯内容非常复杂，或者页面上有大量其他动画，仍然可能导致性能问题。一个常用的优化是使用
will-change: transform;。这个CSS属性会提前告诉浏览器，这个元素将要进行
transform操作，让浏览器可以提前进行一些优化，比如创建独立的图层，从而减少动画过程中的重绘和重排。但也要注意，
will-change不能滥用，只应用于那些确实会频繁变化的元素，否则反而可能消耗更多内存。
再来是响应式设计。跑马灯文字在不同屏幕尺寸下的表现可能会大相径庭。手机屏幕小，文字可能很快就滚过去了，或者显示不全。PC端屏幕大，文字可能显得太慢。你需要考虑如何根据屏幕宽度调整动画速度（比如通过CSS变量或JavaScript），或者在小屏幕上干脆禁用跑马灯效果，直接显示静态文字。我通常会倾向于在小屏幕上简化，毕竟用户体验是第一位的。
最后，内容管理。如果跑马灯的内容是动态加载的，比如来自后端接口，你需要确保在内容加载完成后再启动动画，否则可能会出现空白或者内容闪烁。同时，如果内容长度变化很大，你可能需要用JavaScript来动态计算
.marquee-content的宽度和动画时长，以确保无缝循环和合适的滚动速度。这些都是在纯CSS方案之外，需要用一点JavaScript来“打补丁”的地方，但为了更好的用户体验，这些努力都是值得的。
