純css3實現無縫左右滾動的公告。。。移動端

<div class="moveBox">
    <div class="move">
          <div class="item">溫馨提示：2019年2月4日當天最晚配送時間為下午18：00，給您帶來不便，還望見諒！</div>
           <div class="item">溫馨提示：2019年2月4日當天最晚配送時間為下午18：00，給您帶來不便，還望見諒！</div>
      </div>
 </div>

/*公告無縫滾動*/
.moveBox{position: relative; width:100%; margin: 0 auto px2rem(50); overflow: hidden; white-space:nowrap; }
.move{position: absolute; width:px2rem(1700); top: 0; left:100%; white-space:nowrap; animation:moveAni 15s infinite linear normal; }
.item{float: left; width:px2rem(800); font-size: px2rem(20);}
@keyframes moveAni{
  0%{left:0;}
  100%{left: px2rem(-800); }
}

left移動的距離，要和item的寬度保持一致，才可以實現無縫左右滾動。。。