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

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

夜晨

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

原创

606人浏览过

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

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

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

如何实现？

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

步骤详解：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

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

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

<code class="css">.marquee {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  animation: marquee 10s infinite linear;
}

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

登录后复制

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

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

示例：

<code class="vue"><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></code>

登录后复制

注意：