跑马灯弹幕的无限循环效果

正常使用animation做平移滑动效果，滑到最后一个再重新一遍中间会有空档，这个主要是实现的滑到最后无缝衔接第一个

参考文章：www.cnblogs.com/mengff/p/17…

<div class="c horizontal">
    <div class="sc" :style="marqueeStyle">
      <div class="ss">
        // 这里是要展示的数据
        <div style="width: 100%;display: flex;align-items: center;">
          
        </div>
      </div>
      <div class="ss">
        <div style="width: 100%;display: flex;align-items: center;">
          
        </div>
      </div>
    </div>
</div>

.c {
    overflow: hidden;
    display: inline-block;
  }
  .c.horizontal {
    width: 100vw;
  }
  .sc {
    animation: marquee 90s linear infinite;
    display: inline-block;
    white-space: nowrap;
  }
  .ss {
    display: inline-block;
    }
  }
  @keyframes marquee {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-50%, 0, 0);
    }
  }

数据动态不确定长度的情况下：

computed: {
  marqueeKeyframes() {
      const animationDuration = this.marqueeList.length * 3;
      return `
        @keyframes marquee {
          0% {
            transform: translate3d(0, 0, 0);
          }
          100% {
            transform: translate3d(-50%, 0, 0);
        }
        }
        .marquee {
          animation: marquee ${animationDuration}s linear infinite;
        }
      `;
    },
    marqueeStyle() {
      return {
        animation: `marquee ${this.marqueeList.length * 3}s linear infinite`
      };
    }
},



const styleTag = document.createElement('style');
styleTag.innerHTML = this.marqueeKeyframes;
document.head.appendChild(styleTag);