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

 

posted @ 2019-01-24 12:30  Shimily  阅读(2396)  评论(0编辑  收藏  举报