Vue 实现跑马灯/文字滚动效果

在 Vue 中实现跑马灯/文字滚动效果，可以使用 CSS 动画或第三方库。本文介绍了使用 CSS 动画的方法：创建滚动文本，用

包裹文本。定义 CSS 动画，设置 overflow: hidden、width 和 animation。定义关键帧，设置动画开始和结束时的 transform: translateX()。调整动画属性，如持续时间、滚动速度和方向。

Vue 实现跑马灯/文字滚动效果

如何实现？

在 Vue 中实现跑马灯/文字滚动效果，可以使用 CSS 动画或第三方库。本文将介绍使用 CSS 动画的方法。

步骤详解：

1. 创建滚动文本：在 Vue 模板中，包裹需要滚动的文本，例如：<div class="marquee"><p>{{ text }}</p></div>。
2. 定义 CSS 动画：在 <style></style> 标记内，定义 CSS 动画，例如：

.marquee {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  animation: marquee 10s infinite linear;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

• overflow: hidden 隐藏超出容器部分的文本。
• width: 100% 设置容器宽度与文本宽度相等。
• animation 定义了动画名称、持续时间、重复次数和播放模式。
• @keyframes 定义了动画关键帧，0% 表示动画开始时，100% 表示动画结束时。

3. 调整动画属性：根据需要调整动画属性，例如持续时间、滚动速度或方向。

示例：

<template>
  <div class="marquee"><p>{{ text }}</p></div>
</template>

<script>
export default {
  data() {
    return {
      text: '这是一条跑马灯'
    };
  }
};
</script>

<style>
.marquee {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  animation: marquee 10s infinite linear;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

注意：

• 滚动速度可以通过调整动画持续时间来控制。
• 滚动方向可以通过改变 transform: translateX() 中的值的符号来控制，例如 transform: translateX(100%) 将文本向右滚动。
• 滚动距离可以通过调整容器宽度来控制，使容器宽度小于文本宽度。

以上是Vue 实现跑马灯/文字滚动效果的详细内容。更多信息请关注PHP中文网其他相关文章！