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%);
  }
}
 
//划過暫停
.div:hover{
display: inline-block;
white-space: nowrap;
animation:10s div linear infinite normal paused;
}
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM