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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM