一種微妙的文本滾動(dòng)效果，使用 CSS3 動(dòng)畫在一系列文本中滑動(dòng)。

如何使用它：

1. 將您的文本添加到滾輪。

<span id="rolltext">
  HTML<br/>
  CSS<br/>
  沒(méi)有 JavaScript<br/>
  ...更多文字在這里...

2. 滾輪的示例 CSS。

。滾筒{
  高度：4.125rem；
  線高：4rem；
  位置：相對(duì)；
  溢出：隱藏；
  寬度：100%；
  顯示：彎曲；
  證明內(nèi)容：中心；
  對(duì)齊項(xiàng)目：居中；
  顏色：#1D3557；
}

3. 啟用文字的滾動(dòng)效果。

.roller #rolltext {
  位置：絕對(duì)；
  頂部：0；
  動(dòng)畫：幻燈片5s無(wú)限；  
}
@keyframes 幻燈片 {
  0%{
    頂部：0；
  }
  25%{
    頂部：-4rem；    
  }
  50%{
    頂部：-8rem；
  }
  72.5%{
    頂部：-12.25rem；
  }
}

以上就是關(guān)于“CSS滾動(dòng)文本效果”的介紹，大家如果想了解更多相關(guān)知識(shí)，可以關(guān)注一下動(dòng)力節(jié)點(diǎn)的Java視頻，里面的課程內(nèi)容細(xì)致全面，通俗易懂，適合小白學(xué)習(xí)，希望對(duì)大家能夠有所幫助。