纯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的宽度保持一致，才可以实现无缝左右滚动。。。

 

转载于:https://www.cnblogs.com/shimily/articles/10313784.html