现代web开发中实现跑马灯效果最推荐使用css的@keyframes规则配合animation属性；1. 通过定义@keyframes创建动画关键帧，并用animation应用，实现如文字或图片的移动；2. 为实现无缝循环，需在html中复制滚动内容，并在css中让滚动容器移动自身宽度的一半（如translatex(-50%)），使内容接续呈现；3. 该方法适用于文本、图片或复杂布局，只需将内容置于动画元素内，并用flex布局确保水平排列；4. 可通过animation-play-state控制暂停（如:hover时paused），调整animation-duration改变速度，以及修改transform值或使用animation-direction来改变滚动方向。
跑马灯效果，也就是我们常说的文字或图片滚动，在现代Web开发中，最推荐且主流的做法是利用CSS的
@keyframes规则配合
animation属性来实现。这不仅能提供比老旧、已废弃的标签更强大的控制力，比如动画的暂停、反转、速度和方向，还能确保更好的性能和兼容性。在我看来，掌握CSS动画是前端工程师的必备技能，而跑马灯只是它众多应用场景中的一个缩影。
解决方案
要用CSS制作跑马灯效果，核心就是定义一个关键帧动画，让元素在指定的时间内从一个位置移动到另一个位置。
我们先来构建一个基本的HTML结构：
立即学习“前端免费学习笔记（深入）”；
这是一段滚动的新闻公告，内容会持续向左滚动，循环播放。欢迎关注我们的最新动态！
接着，是关键的CSS部分。这里我们定义一个名为
scroll-left的动画，让
marquee-content元素从容器右侧完全移出，再从左侧完全移入，形成循环滚动的效果。
.marquee-container {
width: 100%; /* 容器宽度，可根据需要调整 */
overflow: hidden; /* 隐藏超出容器的内容 */
white-space: nowrap; /* 确保内容不换行 */
box-sizing: border-box; /* 盒模型设置 */
border: 1px solid #eee; /* 示例边框 */
padding: 10px;
background-color: #f9f9f9;
}
.marquee-content {
display: inline-block; /* 确保内容可以水平滚动 */
padding-left: 100%; /* 让内容从容器右侧完全进入 */
animation: scroll-left 15s linear infinite; /* 应用动画 */
}
/* 定义关键帧动画 */
@keyframes scroll-left {
0% {
transform: translateX(0%); /* 动画开始时在原始位置 */
}
100% {
transform: translateX(-100%); /* 动画结束时向左移动自身宽度的100% */
}
}这段代码实现的是内容从右侧进入，向左滚动，直到完全消失。
padding-left: 100%;是一个小技巧，它让内容一开始就处于容器的右侧外部，这样滚动时看起来是从右边“出现”的。
transform: translateX(-100%);则让内容向左移动了自身宽度的距离，从而实现了滚动效果。
CSS跑马灯效果如何实现无缝循环滚动？
实现无缝循环滚动，其实是很多开发者在刚开始用CSS动画做跑马灯时会遇到的一个“坑”。你可能会发现，内容滚完一次后，会有个明显的空白期，然后才重新出现。这在用户体验上是很糟糕的。
解决这个问题的常用方法是复制滚动内容。想象一下，你有一段文字A，当它滚动到快要消失的时候，文字A的副本（文字A'）已经紧随其后开始进入视线，这样当文字A完全消失时，文字A'正好填补了空白，实现了视觉上的无缝衔接。
具体做法是在HTML中将需要滚动的实际内容复制一份或多份，并放在同一个滚动元素内。
这是一段滚动的新闻公告，内容会持续向左滚动，循环播放。欢迎关注我们的最新动态！
这是一段滚动的新闻公告，内容会持续向左滚动，循环播放。欢迎关注我们的最新动态！
CSS部分则需要做一些调整，让
marquee-content-wrapper作为实际的滚动对象，并且让里面的内容水平排列。
.marquee-container {
width: 100%;
overflow: hidden;
box-sizing: border-box;
border: 1px solid #eee;
padding: 10px;
background-color: #f9f9f9;
}
.marquee-content-wrapper {
display: flex; /* 使用Flexbox让内容项水平排列 */
white-space: nowrap; /* 防止内容项内部文本换行 */
animation: scroll-seamless 15s linear infinite; /* 应用无缝滚动动画 */
}
.marquee-content-item {
flex-shrink: 0; /* 防止内容项被压缩 */
padding-right: 20px; /* 内容项之间的间距 */
/* 其他样式，如字体大小、颜色等 */
}
@keyframes scroll-seamless {
0% {
transform: translateX(0);
}
100% {
/* 关键：移动的距离是单份内容的宽度，或者说是总内容的一半宽度 */
/* 假设有两份完全相同的内容，总宽度是内容宽度的两倍，移动一半总宽度就是移动一份内容的宽度 */
transform: translateX(-50%);
}
}这里的
translateX(-50%)是基于
marquee-content-wrapper的宽度而言的，如果你的
marquee-content-wrapper包含了两个完全相同的
marquee-content-item，那么当它移动自身宽度的50%时，就相当于第一个
item完全移出了视线，第二个
item正好接上。这种方法对于内容长度不固定的情况，可能需要JavaScript来动态计算并调整
@keyframes中的
translateX值，或者更巧妙地利用CSS变量。
除了文本，CSS跑马灯还能滚动图片或复杂布局吗？
当然可以！CSS动画的强大之处就在于它作用于元素本身，而不管元素里面承载的是什么内容。无论是文本、图片、图标，甚至是更复杂的卡片式布局，只要它们被包含在那个进行动画的元素（例如我们上面例子中的
.marquee-content或
.marquee-content-wrapper）里面，都能跟着一起滚动。
想象一下一个新闻网站的顶部滚动条，里面可能不仅有标题，还有小缩略图、发布日期等。你完全可以将这些元素组织在一个
div里，然后让这个
div作为滚动单元。
例如，如果你想滚动一组图片：
@@##@@ @@##@@ @@##@@ @@##@@ @@##@@
CSS样式和上面无缝滚动的文本类似，只是内部的
marquee-content-item变成了
img标签，并且你需要确保图片有合适的尺寸和间距：
.marquee-gallery-wrapper {
display: flex; /* 让图片水平排列 */
white-space: nowrap; /* 防止图片换行 */
animation: scroll-gallery 20s linear infinite; /* 调整动画速度 */
}
.gallery-item {
flex-shrink: 0; /* 防止图片被压缩 */
width: 150px; /* 示例图片宽度 */
height: 100px; /* 示例图片高度 */
margin-right: 15px; /* 图片之间的间距 */
object-fit: cover; /* 确保图片填充且不失真 */
}
@keyframes scroll-gallery {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); /* 同样，如果复制了一半内容，就移动50% */ }
}关键在于
display: flex;和
flex-shrink: 0;确保了内部元素能按你想要的方式水平排列且不被压缩。只要你的HTML结构合理，CSS动画就能很灵活地应用于各种内容类型。
如何控制CSS跑马灯的暂停、速度和方向？
控制跑马灯的动态行为是提升用户体验的关键。CSS提供了非常直观的属性来管理这些方面。
暂停（Pause）： 最常见的需求是当用户鼠标悬停在跑马灯上时，它能暂停滚动，方便用户阅读。这可以通过
animation-play-state属性来实现：
.marquee-content, .marquee-content-wrapper {
animation: scroll-left 15s linear infinite; /* 正常播放动画 */
}
.marquee-container:hover .marquee-content,
.marquee-container:hover .marquee-content-wrapper {
animation-play-state: paused; /* 鼠标悬停时暂停动画 */
}这里，我们将
animation-play-state: paused;应用到容器的
:hover伪类上，这样当鼠标移到整个跑马灯区域时，内部的滚动动画就会暂停。移开鼠标，动画继续。
速度（Speed）： 控制跑马灯的速度非常简单，只需要调整
animation-duration属性的值。
animation-duration: 15s;
：15秒完成一次动画周期。animation-duration: 5s;
：5秒完成一次动画周期，速度更快。animation-duration: 30s;
：30秒完成一次动画周期，速度更慢。
数值越小，动画完成得越快，看起来就越“急”。反之，数值越大，动画越慢，给人一种悠闲的感觉。
方向（Direction）： 改变跑马灯的滚动方向，主要有两种方式：
-
调整
@keyframes
中的transform
值：-
向左滚动（默认）：
from { transform: translateX(0); } to { transform: translateX(-100%); } -
向右滚动：
from { transform: translateX(-100%); } to { transform: translateX(0); }(或者从0
到100%
，取决于你希望内容从哪边进入) -
向上滚动：
from { transform: translateY(0); } to { transform: translateY(-100%); } -
向下滚动：
from { transform: translateY(-100%); } to { transform: translateY(0); }
这种方法更直观，因为你直接定义了元素从哪到哪。
-
向左滚动（默认）：
-
使用
animation-direction
属性： 如果你已经定义了一个从左到右或从上到下的动画，但想让它反向播放，可以使用animation-direction: reverse;
。.marquee-content { animation: scroll-left 15s linear infinite; /* 假设 scroll-left 是从左到右 */ animation-direction: reverse; /* 让它从右到左播放 */ }这个属性会反转动画的播放方向，而无需修改
@keyframes
本身。这在某些场景下非常方便，比如你希望在不同状态下切换滚动方向。
通过这些CSS属性的组合和调整，你几乎可以实现各种你想要的跑马灯效果，而且相比旧的
marquee标签，它们提供了更精细、更现代的控制方式。
