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

结构

  <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%);
  }
}

猜你喜欢

转载自www.cnblogs.com/lijinxiao/p/13189328.html
今日推荐