vue列表走马灯

html内容

 <div id="summer-wrap">
        <div class="list">
          <ul>
            <li class="summerList" v-for="(item,index) in summerData" :key="index">
              {{item.name}}
            </li>

            <li class="summerList" v-for="(item,index) in summerData" :key="'li2' + index">             
              {{item.name}}
            </li>
          </ul>
        </div>
      </div>

css

#summer-wrap{
      width:100%;
      height: 400px; 
      position: relative; 
      overflow:hidden;
    }
    .list{
        position: absolute;
        left: 0; 
        top: 0;   
        -webkit-animation: 30s move infinite linear; 
        width: 2544px; //列表实际宽度的一半
    }
    @-webkit-keyframes move{
        0% {
              left: 0;
        }
        50%{
          left:-1272px;
        }
        100% {
              left: -2544px //和list的宽度需一致
        }
    }
    @keyframes move {
        0% {
          left: 0;
        }
        50%{
          left:-1272px;
        }
        100% {
          left: -2544px;
        }
    }
    #summer-wrap:hover .list {
      // 动画暂停播放
        -webkit-animation-play-state: paused; 
    }