成都小程序設(shè)計(jì)如何使用CSS創(chuàng)建滾動(dòng)文本可以幫助您提升您的網(wǎng)站，為訪問者提供更具視覺吸引力的體驗(yàn)。最好的部分？學(xué)習(xí)如何在CSS中創(chuàng)建文本滾動(dòng)并不像看起來那么棘手。一旦您學(xué)會(huì)了如何創(chuàng)建滾動(dòng)文本，您就可以用它來制作新聞自動(dòng)收?qǐng)?bào)機(jī)、為電影制作片尾字幕，甚至讓游客沉浸在遙遠(yuǎn)的銀河系中。
雖然一般來說，最好讓您的網(wǎng)站保持簡單并以內(nèi)容為中心，但偶爾的創(chuàng)意觸動(dòng)可以大大吸引新訪問者。本指南將教您如何生成滾動(dòng)文本動(dòng)畫CSS和HTML樣式。我們還提供了四個(gè)代碼模板，您可以復(fù)制和調(diào)整以輕松為您的站點(diǎn)創(chuàng)建自己的滾動(dòng)文本。
要?jiǎng)?chuàng)建我們的滾動(dòng)文本，我們將使用CSS動(dòng)畫與transform:translateX和transform:translateY屬性配對(duì)。為確保跨瀏覽器兼容性，我們還將添加帶有供應(yīng)商前綴-webkit-（適用于Safari和Chrome）和-moz-（適用于Firefox）的動(dòng)畫規(guī)則。準(zhǔn)備好開始創(chuàng)建滾動(dòng)文本動(dòng)畫CSS樣式了嗎？讓我們從從右到左的文本開始。
要使文本從右向左滾動(dòng)，請(qǐng)將其放在ID為scroll-text的div中。該元素將在其容器divscroll-container內(nèi)移動(dòng)。
您必須修改CSS才能創(chuàng)建所需的文本滾動(dòng)效果。要更改滾動(dòng)速度，請(qǐng)將動(dòng)畫屬性的秒值從10秒更改為其他數(shù)字。較低的值會(huì)加快滾動(dòng)效果，而較高的值會(huì)減慢滾動(dòng)效果。
滾動(dòng)速度也受div寬度的影響：滾動(dòng)容器越寬，文本滾動(dòng)速度越快。這意味著如果調(diào)整瀏覽器窗口的大小，文本速度會(huì)發(fā)生變化。您可以將滾動(dòng)容器寬度設(shè)置為特定像素值來解決此問題。
對(duì)于從左到右的滾動(dòng)文本，只需交換正負(fù)translateX值即可。我們會(huì)將100%的所有實(shí)例更改為-100%以及-100%的所有實(shí)例更改為100%。我還將scroll-text中的文本右對(duì)齊。這使得文本立即出現(xiàn)在動(dòng)畫的開始處。
要使文本垂直滾動(dòng)，請(qǐng)將所有出現(xiàn)的translateX更改為translateY。我還將文本居中，將動(dòng)畫持續(xù)時(shí)間減少到5秒，并為div容器指定了一個(gè)高度值。結(jié)果，垂直滾動(dòng)更加明顯。
與水平滾動(dòng)類似，我們只需要翻轉(zhuǎn)我們的正負(fù)translateY值來改變垂直滾動(dòng)的方向。
現(xiàn)在我們已經(jīng)介紹了創(chuàng)建滾動(dòng)文本的基礎(chǔ)知識(shí)，讓我們深入了解創(chuàng)建更詳細(xì)的元素所需了解的內(nèi)容。更動(dòng)態(tài)的滾動(dòng)文本元素可能需要JavaScript來模擬字幕效果。為此，我們提供了一些使用JavaScript的示例。
第一個(gè)示例使用JavaScript（特別是jQuery）從一組列表項(xiàng)生成旋轉(zhuǎn)的自動(dòng)收?qǐng)?bào)機(jī)動(dòng)畫。此實(shí)現(xiàn)的令人興奮之處在于，您可以根據(jù)需要添加任意數(shù)量的列表項(xiàng)—而且您無需更改腳本。
除了CSS動(dòng)畫之外，您還可以使用
