更新時間:2022-02-17 10:30:31 來源:動力節點 瀏覽1089次
一種微妙的文本滾動效果,使用 CSS3 動畫在一系列文本中滑動。
如何使用它:
1. 將您的文本添加到滾輪。
<span id="rolltext">
HTML<br/>
CSS<br/>
沒有 JavaScript<br/>
...更多文字在這里...
2. 滾輪的示例 CSS。
。滾筒{
高度:4.125rem;
線高:4rem;
位置:相對;
溢出:隱藏;
寬度:100%;
顯示:彎曲;
證明內容:中心;
對齊項目:居中;
顏色:#1D3557;
}
3. 啟用文字的滾動效果。
.roller #rolltext {
位置:絕對;
頂部:0;
動畫:幻燈片5s無限;
}
@keyframes 幻燈片 {
0%{
頂部:0;
}
25%{
頂部:-4rem;
}
50%{
頂部:-8rem;
}
72.5%{
頂部:-12.25rem;
}
}
以上就是關于“CSS滾動文本效果”的介紹,大家如果想了解更多相關知識,可以關注一下動力節點的Java視頻,里面的課程內容細致全面,通俗易懂,適合小白學習,希望對大家能夠有所幫助。
0基礎 0學費 15天面授
有基礎 直達就業
業余時間 高薪轉行
工作1~3年,加薪神器
工作3~5年,晉升架構
提交申請后,顧問老師會電話與您溝通安排學習