Vue 实现跑马灯/文字滚动效果-Vue.js-PHP中文网

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

夜晨

发布： 2024-12-08 07:42:22

原创

546人浏览过

在 Vue 中实现跑马灯/文字滚动效果，可以使用 CSS 动画或第三方库。本文介绍了使用 CSS 动画的方法：创建滚动文本，用包裹文本。定义 CSS 动画，设置 overflow: hidden、width 和 animation。定义关键帧，设置动画开始和结束时的 transform: translateX()。调整动画属性，如持续时间、滚动速度和方向。

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

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

如何实现？

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

步骤详解：

立即学习“前端免费学习笔记（深入）”；

创建滚动文本：在 Vue 模板中，包裹需要滚动的文本，例如：
{{ text }}
。
定义 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% 表示动画结束时。

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

示例：

<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>

登录后复制

注意：