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