简单实现文字滚动效果-CSS版本

先看看效果

话不多说直接上代码

<template>
  <div class="main">
    <div class="scroll-region">
      <div class="swiper-scroll-content">
        <span class="list-btn" v-for="(item, index) in overviewList" :key="index">
          {{ item }}
        span>
      div>
    div>
  div>
template>
1
2
3
4
5
6
7
8
9
10
11

<script>
export default {
  data() {
    return {
      overviewList: [
        '富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善', '富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治',
      ]
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

主要修改点有两个：

1. transform: translateX(-153%)，这里需要自己根据情况更改衔接，保证轮播是连贯不断地。
2. 通过overviewList的尾部添加重复文本，配合transform来实现轮播连贯。