文字跑马灯动画效果

效果展示：

 

操作步骤：

使用工具：vue3marquee

1、安装包

使用npm：

npm install vue3-marquee@latest --save

使用yarn：

yarn add vue3-marquee@latest

2、注册组件

全局注册：

// main.js
import { createApp } from 'vue'
import Vue3Marquee from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
​
createApp(App).use(Vue3Marquee).mount('#app')

局部注册：

import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
​
export default {
  components: {
    Vue3Marquee,
  },
}

3、在组件中使用

​

 <div class="ceshi">
    <Vue3Marquee>我是有跑马灯效果的文字哦</Vue3Marquee>
  </div>

​

注意：一定要加一个div固定一下宽度 不然太长啦

详细使用 ：  vue3-marquee - npm (npmjs.com)