css 实现无缝滚动的弹幕效果

效果：

思维：

准备两个div，多准备一份，当向左滑动，后面就不会滑空了（图为原位置，div1为translate 0%）

div1在translate 100% 这个位置开始向左滑动，一直滑动到-100%

流程：

1. 一开始我们就把它从原本的位置，向右移动自身一个宽度的距离，div1就刚好移动到这个区域的边缘了（此时div1在translate 100% 这个位置，开始向左滑动）

2. 通过动画控制div1滚动到负的100%这个位置（控制这两个div向左滚动，滚动到-100%的位置）
   2.1 滚动到div1刚好填充满这个区域，就是它们的原始位置，就是0的位置

   2.2 div1继续向左滚动到-100%的位置，div1负100%时，div2就刚好填充满这个区域了，这里div1就是-100%

第一个动效：

@keyframes animate {
  from {
    transform: translate(100%)
  }

  to {
    transform: translate(-100%);
  }
}

问题：

没办法实现无缝滚动，会有落空（当div1走到translate -100%后，重新回到translate 100%时，div2也会回去，会落空） 解决：动画错开

3. div重新开一个动画，让它的动画起始位置和div1一样，只要让div2的translate变回0，单独对 div2开一个动画,两个动画的执行时长是一样的，但是最关键的一点，让其中一个的动画提前执行
   
4. 比如：两个动画的执行时长都是20秒，让DIV2它提前十秒就开始执行了，所以开始是div2出现在区域里面，这个时候div1它的动画还没有开始执行,但div2已经执行了一半了
   
5. 他们向左滑动，一直滑动到区域边缘这里的时候，div2 它的动画就已经执行完毕了
6. 这个时候div2就会回到动画执行的起始位置（此时div1动画就是只执行了一半）
7. 动画继续执行，继续向左滑动，滑动到div2刚好充满这个区域，这个时候div1它的动画就执行完毕了（后续div1就回到动画的起始位置translate 100% ）

第二个动效：

@keyframes animate2 {
  from {
    transform: translate(0%)
  }

  to {
    transform: translate(-200%);
  }
}

全部代码：

<template>
  <div class="container" style='--t:20s'>


    <div class="container-item1">
      <span>HTML</span>
      <span>CSS</span>
      <span>JAVASCRIPT</span>
      <span>PHP</span>
      <span>JAVA</span>
      <span>VUE</span>
      <span>THREEJS</span>
    </div>
    <div class="container-item2">
      <span>TMLH</span>
      <span>CSS</span>
      <span>JAVASCRIPT</span>
      <span>PHP</span>
      <span>JAVA</span>
      <span>VUE</span>
      <span>THREEJS</span>
    </div>
  </div>


</template>

<script>
export default {
  data() {
    return {
      domWidth: 100
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
  },

};
</script>
<style lang="less" scoped>

.container {
  position: relative;
  display: flex;
  width: 500px;
  overflow: hidden;
  background-color: red;
}

.container-item1 {
  white-space: nowrap;
  animation: animate var(--t)linear infinite;
  transform: translate(100%)



}
.container-item2{
  white-space: nowrap;
  animation: animate2 var(--t)linear infinite;
  animation-delay: calc(var(--t)/ -2);//提前执行
  //animation-delay: calc(var(--t)/ 2);//动画延迟执行

      transform: translate(0%)
}

@keyframes animate {
  from {
    transform: translate(100%)
  }

  to {
    transform: translate(-100%);
  }
}
@keyframes animate2 {
  from {
    transform: translate(0%)
  }

  to {
    transform: translate(-200%);
  }
}

.container div span {
  display: inline-flex;
  margin: 10px;
  letter-spacing: 3px;
  background-color: black;
  color: wheat;
  padding: 5px 18px;
}
</style>

参考视频：https://www.douyin.com/video/7342473861348330789