Vue 实现跑马灯/文字滚动效果
如何实现？
在 Vue 中实现跑马灯/文字滚动效果，可以使用 CSS 动画或第三方库。本文将介绍使用 CSS 动画的方法。
步骤详解：
立即学习“前端免费学习笔记（深入）”；
创建滚动文本：在 Vue 模板中，包裹需要滚动的文本，例如：{{ text }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.marquee {
overflow: hidden;
width: 100%;
white-space: nowrap;
animation: marquee 10s infinite linear;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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中文网其它相关文章！