Vue+Css3实现无缝滚动

数据渲染

<template>
  <div class="about">
    <div class="scrollbox">
      <ul class="ul1" :style="`animation-duration:${datalist.length * 5}s`">
        <li v-for="item in datalist" :key="item.id">{{ item.text }}</li>
        <!-- 需要写渲染两份li的试图这样可以实现无缝滚动 注意key不能重复-->
        <li v-for="item in datalist" :key="item.id + 'copy'">
          {{ item.text }}
        </li>
      </ul>
    </div>
  </div
</template>

数据的制造

<script>
export default {
  name: "Css3gd",
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      datalist: [],
      run: null,
      ul1: 0,
    };
  },

  mounted() {
    for (let key = 0; key < 10; key++) {
      this.datalist.push({ id: key, text: `列表${key}` });
    }
  },

  destroyed() {
    this.run = null;
  },

  methods: {},
};
</script>

Css核心代码

<style lang="less">
.scrollbox {
  width: 500px;
  height: 100px;
  background-color: rgb(27, 140, 140);
  overflow: hidden;
  ul {
    height: fit-content;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    animation-name: seamscss-scrolling;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    &:hover {
    // 暂停动画  主要是鼠标放上去实现暂停滚动的效果
      animation-play-state: paused;
    }

    li {
      width: 50%;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #eee;
      &:nth-of-type(2n) {
        background-color: rgb(26, 196, 74);
      }
      &:nth-of-type(2n-1) {
        background-color: rgb(196, 26, 168);
      }
    }

    @keyframes seamscss-scrolling {
      0% {
        transform: translateY(0px);
      }
      100% {
        transform: translateY(-50%);
      }
    }
  }
}
</style>

我很菜，我是一直菜鸟，哎啥时候才能成为大佬啊~