完整示例
将 CSS 和 HTML 结合起来，一个完整的跑马灯效果如下：
HTML:
<div class="marquee-container">
<span class="marquee-text">这是一段很长很长的跑马灯文字，它会一直向左边滚动，永不停歇！</span>
</div>CSS:
/* 定义动画 */
@keyframes marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
/* 应用样式的类 */
.marquee-text {
display: inline-block;
white-space: nowrap;
color: red;
animation: marquee 100s linear infinite;
}
/* 可选：给容器设置宽度和溢出隐藏，以获得更好的视觉效果 */
.marquee-container {
width: 300px; /* 容器宽度 */
overflow: hidden; /* 隐藏溢出的文字 */
border: 1px solid #ccc;
padding: 10px;
}最终效果 ："这是一段很长很长的跑马灯文字..."这段文字会在 300px 宽的容器内，以恒定的速度从右向左无限循环滚动，颜色为红色。
样式解释：
.marquee-text { display: inline-block; white-space: nowrap; color: red; animation: marquee 100s linear infinite; }这段代码是什么意思
这段 CSS 代码定义了一个名为 .marquee-text的类选择器，用于创建一个无限循环的水平滚动文字效果（跑马灯效果）。
让我逐行解析：
1. .marquee-text { ... }
这是 CSS 的类选择器 ，表示这套样式规则将应用于所有带有 class="marquee-text"的 HTML 元素。
2. display: inline-block;
-
作用 ：将元素的显示类型设置为内联块级元素。
-
为什么需要 ：
inline-block兼具inline（不独占一行）和block（可以设置宽高等尺寸属性）的特性。这对于跑马灯效果很重要，因为它允许元素在一行内流动，同时又可以承载动画。
3. white-space: nowrap;
-
作用 ：强制文本内容不换行，始终在同一行内显示。
-
为什么需要：这是跑马灯效果的核心。如果文字自动换行，就无法形成连续滚动的效果。所有文字会被压缩或溢出容器，保持为一长串。
4. color: red;
-
作用：将文字颜色设置为红色。
-
说明：这是一个普通的样式属性，与跑马灯效果本身无关，只是为了视觉效果。
5. animation: marquee 100s linear infinite;
这是实现动画效果的关键属性，它简写了多个动画子属性。
-
animation-name: marquee;：指定要使用的 @keyframes 动画规则 的名称。这个规则（在代码其他地方定义）描述了元素在动画过程中如何变化。 -
animation-duration: 100s;：动画完成一个周期所需的总时间为 100 秒。时间越长，滚动越慢。 -
animation-timing-function: linear;：动画的速度曲线为线性，意味着从开始到结束速度恒定，没有加速或减速。 -
animation-iteration-count: infinite;：动画无限次重复播放，永远不会停止。 -
一个典型的
marquee动画定义如下：@keyframes marquee { 0% { transform: translateX(0%); /* 动画开始时，元素在初始位置 */ } 100% { transform: translateX(-100%); /* 动画结束时，元素向左移动了自身宽度的 100% */ } }这个 keyframes 的解释：
-
0%：动画开始时，元素的位置不变。 -
100%：动画结束时，元素通过transform: translateX(-100%)向左移动了它自身宽度的 100%。这确保了整个文本行都能从视图中移出，为无缝循环做好准备。