HTML循環(huán)滾動(dòng)文字是一個(gè)常見(jiàn)的網(wǎng)頁(yè)效果，可以讓網(wǎng)頁(yè)上的文字不斷滾動(dòng)，從而吸引用戶的注意力。實(shí)現(xiàn)這一效果的代碼很簡(jiǎn)單，可以使用marquee標(biāo)簽或者自己編寫(xiě)HTML循環(huán)滾動(dòng)文字代碼。
<html> <head> <title>HTML循環(huán)滾動(dòng)文字代碼</title> </head> <body> <marquee direction="left" loop="infinite" scrollamount="5"> 這是一段需要滾動(dòng)的文字。 </marquee> </body> </html>
上面的代碼中，我們使用了marquee標(biāo)簽來(lái)實(shí)現(xiàn)HTML循環(huán)滾動(dòng)文字效果。其中，direction屬性用于定義滾動(dòng)方向，loop屬性用于定義循環(huán)次數(shù)，scrollamount屬性用于定義滾動(dòng)速度。
除了marquee標(biāo)簽外，我們也可以使用自己編寫(xiě)的HTML循環(huán)滾動(dòng)文字代碼來(lái)實(shí)現(xiàn)相同的效果。
<html>
<head>
<title>HTML循環(huán)滾動(dòng)文字代碼</title>
<style>
.scroll-text {
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.scroll-text span {
display: inline-block;
padding-left: 100%;
animation: scroll-left 10s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>
</head>
<body>
<div class="scroll-text">
<span>這是一段需要滾動(dòng)的文字。</span>
</div>
</body>
</html>這里我們使用了CSS3動(dòng)畫(huà)，將文字平移過(guò)程動(dòng)態(tài)展示。具體來(lái)說(shuō)，我們通過(guò)為文字容器div添加scroll-text類，設(shè)置white-space屬性為nowrap和overflow屬性為hidden來(lái)禁止文字換行和溢出。接著，我們?cè)贋槲淖秩萜髦械膕pan元素添加padding-left屬性，值為100%。這樣，文字容器的寬度就設(shè)置成了span元素的100%，也就是文字寬度的100%。
最后，我們?yōu)閟pan元素定義了scroll-left動(dòng)畫(huà)，并將動(dòng)畫(huà)的持續(xù)時(shí)間設(shè)置為10秒，循環(huán)次數(shù)設(shè)置為無(wú)限。在動(dòng)畫(huà)中，我們使用了transform: translateX()屬性，將文字向左平移，從而實(shí)現(xiàn)HTML循環(huán)滾動(dòng)文字效果。