利用css实现大屏新闻数据无缝滚动

前言：前段时间做大屏，需求要求实现新闻数据无缝滚动，数据数据是不固定的，而且每一分钟还要重新获取最新的新闻数据动态，之前是用定时器实现无缝滚动，但是性能不好，页面容易卡顿，然后突然想起来上大学的时候用css做过一个图片无缝滚动，灵机一动我就换了一个思路实现它。接下来上才艺😁
效果：在这里👇

我简单整理了一下，希望可以帮到你

<template>
  <div>
    <div id="bs_scroll_content" ref="boxHeight" class="bs_scroll_content">
      <div
        @mouseenter="Stop"
        @mouseleave="Up"
        class="bs-content"
        :class="openAnim ? 'active' : 'paused'"
        :style="rowup"
        ref="box"
      >
        <div
          :id="'single' + index"
          v-for="(item, index) in listData"
          :key="index"
          class="itemStyle"
        >
          {
   {
    item.name }}
        </div>
      </div>
      <div
        @mouseenter="Stop"
        @mouseleave="Up"
        class="bs-content"
        :class="openAnim ? 'active' : 'paused'"
        :style="rowup"
      >
        <div
          :id="'single' + index"
          v-for="(item, index) in listData"
          :key="index"