vue 跑马灯 文字 横向滚动
时间: 2023-07-04 10:22:23 浏览: 85
要实现 Vue 跑马灯文字横向滚动,可以使用 CSS3 的动画和 Vue 的数据绑定功能。下面是一个简单的实现方法:
1. 在 Vue 组件的 template 中,定义一个 div 包含要滚动的文字,设置它的样式为:
```html
<template>
<div class="marquee">{{ message }}</div>
</template>
<style>
.marquee {
white-space: nowrap;
overflow: hidden;
animation: marquee 5s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>
```
2. 在 Vue 组件的 script 中,定义一个 data 属性 message,它保存要滚动的文字。可以使用定时器或者其他方式来更新 message 的值,从而实现文字的滚动效果。例如:
```js
<script>
export default {
data() {
return {
message: '这是一段跑马灯文字,可以横向滚动!'
}
},
mounted() {
setInterval(() => {
this.message = '这是更新后的跑马灯文字,可以横向滚动!'
}, 5000)
}
}
</script>
```
这样,当组件渲染时,文字就会以 5 秒为周期不断地横向滚动。你也可以根据实际需求来调整动画的时间、方向和循环次数等参数。