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