vue实现走马灯显示文字效果

完整示例

将 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%。这确保了整个文本行都能从视图中移出，为无缝循环做好准备。