HTML滾動字幕向下代碼,可以讓網頁上的文字在指定位置不斷向下滾動,為頁面增加一定的動態效果。以下是實現這一效果的HTML代碼:
<html> <head> <title>滾動字幕向下示例</title> <style> #scroll { position: absolute; top: 50px; left: 50px; width: 200px; height: 100px; overflow: hidden; } #scroll p { position: relative; top: 0; margin: 0; animation: scroll-down 10s linear infinite; } @keyframes scroll-down { 0% { top: 0; } 100% { top: -200px; } } </style> </head> <body> <div id="scroll"> <p> 這是滾動字幕向下的示例內容。這是滾動字幕向下的示例內容。這是滾動字幕向下的示例內容。 </p> </div> </body> </html>
以上代碼中,我們首先創建了一個div元素來包裹需要滾動的文字。通過設置該元素的寬度和高度,并將overflow屬性設置為hidden,可以實現文字在指定區域內滾動的效果。
接著,在該div元素中創建一個p元素,作為需要滾動的文字的容器。我們還將該p元素的初始top值設置為0,并通過animation屬性來引入一個名為scroll-down的關鍵幀動畫,實現文字向下滾動的效果。
最后,我們通過設置scroll-down動畫的關鍵幀,控制文字的滾動速度和滾動距離,實現了完整的滾動字幕向下效果。