只有 CSS 的无限轮播循环

问题描述

有人对如何在视频中创建这样的循环轮播有任何想法吗？我创建了一个，但它崩溃并滚动。

https://drive.google.com/file/d/1Chh4cNkxHKznvpkZ6RR6th1XhsfqFZw9/view

这是我的

结构

  <div class="container">
        <div class="scroller">
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
      </div></div>

...和 ​​css

.container {
    height: 200px;
    overflow-x: hidden;
    position: relative;
  }
  
  .scroller {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(14,300px);
    gap: 16px;
    animation: scrollLeft 25s linear infinite;
  }

  
  @keyframes scrollLeft {
    to {
      transform: translateX(-50%)
    }
  }
  
  .img {
    width: 300px;
    height: 200px;
  }
  
  img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5%;
    
  }



  

https://jsfiddle.net/jLs97t6x/3/

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）