HTML5是HTML語言的第五個(gè)版本，它提供了許多新特性和功能，滾動(dòng)文字切換效果就是其中之一。滾動(dòng)文字切換效果可以為網(wǎng)站增添新意，使其不再單調(diào)乏味。接下來，我們將介紹如何通過HTML5實(shí)現(xiàn)滾動(dòng)文字切換效果。
<!DOCTYPE html>
<html>
<head>
<title>滾動(dòng)文字切換效果代碼</title>
<style>
#scroll {
width: 200px;
height: 50px;
overflow: hidden;
border: 1px solid black;
position: relative;
}
#scroll p {
height: 50px;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
line-height: 50px;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-150px);
}
}
</style>
</head>
<body>
<div id="scroll">
<p>滾動(dòng)文字切換效果1 滾動(dòng)文字切換效果2 滾動(dòng)文字切換效果3</p>
</div>
</body>
</html>在上面的代碼中，首先我們在<head>標(biāo)簽中定義了樣式。我們將文字滾動(dòng)容器的寬度設(shè)為200像素，高度設(shè)為50像素，使用overflow:hidden屬性隱藏滾動(dòng)條。border屬性為1像素黑色實(shí)線。將滾動(dòng)文字切換效果p標(biāo)簽的高度設(shè)為50個(gè)像素，并將其及其父容器的定位設(shè)為相對(duì)。將文字行高設(shè)置為50像素，并在animations中為其添加一個(gè)名為scroll的動(dòng)畫。動(dòng)畫的持續(xù)時(shí)間為10秒，使用線性算法并應(yīng)用于整個(gè)動(dòng)畫，使其永遠(yuǎn)重復(fù)。@keyframes scroll定義了動(dòng)畫的關(guān)鍵幀，其中0%表示一個(gè)動(dòng)畫的開始，100%表示一個(gè)動(dòng)畫的結(jié)束。transform: translateY(-150px)會(huì)將p元素向上移動(dòng)150像素。
最后，我們在<body>標(biāo)簽中添加一個(gè)<div>容器（ID為scroll），將需要滾動(dòng)切換的文字放在一個(gè)<p>標(biāo)簽中。這樣就可以實(shí)現(xiàn)滾動(dòng)文字切換效果了。