在HTML中,字體滾動可以通過使用marquee標簽實現。該標簽在現代 HTML 中已經被廢棄,因此我們可以使用CSS屬性來實現相同的效果。
下面是一個使用CSS來實現字體滾動的簡單示例,其中文本將以從右到左的方式滾動:
<style> .scroll-text { white-space: nowrap; overflow: hidden; animation: scroll 10s linear infinite; } @keyframes scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } } </style> <p class="scroll-text">這是一段需要滾動的文字。</p>在上面的示例中,我們將要滾動的文本放入了p標簽中,并將其類名設置為“scroll-text”。接下來,我們使用CSS中的動畫屬性來定義一個名為“scroll”的動畫,它會沿著x軸從左到右滾動文本。 在類選擇器中,我們還添加了其他兩個屬性。white-space: nowrap;屬性防止文本在換行時自動換行并在一個行內滾動,而overflow: hidden;屬性則確保超出容器時文本被截斷。 最后,我們將定義的類應用于p標簽,使其具有滾動效果。現在,我們就可以使用CSS來實現字體滾動了。