在 vue 中实现跑马灯/文字滚动效果，可以使用 css 动画或第三方库。本文介绍了使用 css 动画的方法：创建滚动文本，用 包裹文本。定义 css 动画，设置 overflow: hidden、width 和 animation。定义关键帧，设置动画开始和结束时的 transform: translatex()。调整动画属性，如持续时间、滚动速度和方向。
Vue 实现跑马灯/文字滚动效果
如何实现？
在 Vue 中实现跑马灯/文字滚动效果，可以使用 CSS 动画或第三方库。本文将介绍使用 CSS 动画的方法。
步骤详解：
立即学习“前端免费学习笔记（深入）”；
-
创建滚动文本：在 Vue 模板中，包裹需要滚动的文本，例如：
<div class="marquee"><p>{{ text }}</p></div>。 -
定义 CSS 动画：在
<style></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>注意：
- 滚动速度可以通过调整动画持续时间来控制。
- 滚动方向可以通过改变
transform: translateX()中的值的符号来控制，例如transform: translateX(100%)将文本向右滚动。 - 滚动距离可以通过调整容器宽度来控制，使容器宽度小于文本宽度。
