css实现无缝循环滑动

使用纯css实现无缝循环滑动

最近写的项目使用的是vue3，所以通过vue循环图片的方式就会非常简便。

//HTML
<div class="wfhd-one">
      <div class="wfhd-tdryone">
            <div class="wdhs-tdry-one" v-for="(item, i) in tdryArr1" :key="i">
              <img :src="item" alt="" />
            </div>
      </div>
 </div>

在循环的图片数组中，我选择了复制了一份一模一样的放到数组末尾，这样就不用担心图片不够，循环的很尴尬的情况。

其实一般来说多复制一张照片就行，能与初始的第一张照片重叠上就行，我这大盒子的宽度稍微有点儿大，所以复制了一份，大家自己看着办吧~

令人头大的css样式来了~

//css样式
 .wfhd-one {
        width: 100%;
        height: 200px;
        display: float;
        margin-bottom: 20px;
        overflow: hidden;

        .wfhd-tdryone {
          width: 2500px;
          height: 100%;

          .wfhd-tdry-one {
            float: left;
            width: 250px;
            height: 100%;
            position: relative;
            animation: tdry 24s linear infinite;
            @keyframes tdry {
              0% {
                transform: translateX(0%);
              }
              100% {
                transform: translateX(-1250px);
              }
            }

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

效果就是一排图片在无限连接着滑动，不会间断。突然不知道怎么形容这个。。。关键词就是无限、循环、滑动，请自行脑补。。。

难点其实在于计算它滑动的距离，是在啥时候能和初始的状态重叠上，悄悄拿出我的计算机，归零归零归零~~~