在CSS中,文字滾動可以通過使用@keyframes
動畫和animation
屬性來實現(xiàn),下面是一個簡單的示例,展示了如何在CSS中創(chuàng)建文字滾動效果:
1、HTML結(jié)構(gòu):
<div class="scroll-text"> 你的文字內(nèi)容 </div>
2、CSS樣式:
.scroll-text { position: relative; width: 100%; height: 50px; line-height: 50px; text-align: center; white-space: nowrap; overflow: hidden; animation: scrollText 5s linear infinite; } @keyframes scrollText { 0% { left: 100%; } 100% { left: -100%; } }
在這個示例中,我們創(chuàng)建了一個名為scroll-text
的類,用于應(yīng)用文字滾動效果。@keyframes
動畫scrollText
定義了文字從右到左的滾動效果。animation
屬性將動畫應(yīng)用到元素上,設(shè)置動畫持續(xù)時間為5秒,線性速度,并且設(shè)置為無限循環(huán)。
你可以根據(jù)需要調(diào)整動畫的持續(xù)時間、速度曲線以及循環(huán)次數(shù),還可以添加其他樣式來定制滾動的外觀,如背景顏色、字體樣式等。