CSS 文字从左到右滚动 (右进左出)

时间:2020-06-24 19:36:45   收藏:0   阅读:522

结构

  <div class=‘divWrap‘>

    <div class=‘div‘>

      CSS 文字从左到右滚动(所需要滚动的文字)

    </div>

  </div>

 

css样式

 

.divWrap{
  width: 300px;//(宽度)
  overflow: hidden;//(超出隐藏)
}

.div{
  display: inline-block;
  white-space: nowrap;
  animation: 10s div linear infinite normal;
}
//根据自己情况调节,
@keyframes div {
  //起始位置
  0% {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
  }
  //终点位置
  100% {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }
}

原文:https://www.cnblogs.com/lijinxiao/p/13189328.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!