css实现无限无缝滚动list

核心基于css的animation动画属性，以及transform属性来完成的。

直接上代码 html部分 在一个大盒子中放入两个小盒子，小盒子用来实现list的滚动效果。第二个小盒子的作用是用来实现无缝的效果。

  <div class="fatherDiv">

      <div class="sonDiv">

        <li class="list">1</li>

        <li class="list">2</li>

        <li class="list">3</li>

        <li class="list">4</li>

        <li class="list">5</li>

        <li class="list">6</li>

        <li class="list">7</li>

        <li class="list">8</li>

      </div>

       <div class="sonDiv">

        <li class="list">1</li>

        <li class="list">2</li>

        <li class="list">3</li>

        <li class="list">4</li>

        <li class="list">5</li>

        <li class="list">6</li>

        <li class="list">7</li>

        <li class="list">8</li>

      </div>

    </div>
    

css部分

<style lang="scss" scoped>

  .fatherDiv{

      height: 200px;

      width: 200px;

      overflow: hidden;

      .sonDiv{

          animation:myAnimation 4s infinite linear ;

          width: 100%;

          li{
              width: 100%;
              height:40px ;
              background: red;
          }

      }

  }
@keyframes myAnimation{
    from{
transform: translate(0px, 0%);
    }
    to{
transform: translate(0px, -100%);
    }
}
</style>