CSS滾動效果文字是一種常用的網頁設計元素,可以讓頁面內容更具有動感和視覺吸引力。下面我們來介紹一些常見的CSS滾動效果文字實現方式。
//實現1:使用CSS3動畫關鍵幀 .scroll-text { animation: scroll 4s infinite linear; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } //實現2:使用CSS3過渡效果 .scroll-text { overflow: hidden; white-space: nowrap; } .scroll-text span { display: inline-block; padding-right: 100%; transition: transform 8s linear; transform: translateX(0); } .scroll-text:hover span { transform: translateX(-100%); } //實現3:使用JavaScript控制滾動速度 var scrollSpeed = 50; var scrollPos = 0; var scrollWidth = document.getElementById("scroll-text").scrollWidth; function scrollText() { scrollPos += 1; if (scrollPos >= scrollWidth) { scrollPos = 0; } document.getElementById("scroll-text").style.transform = "translateX(-" + scrollPos + "px)"; setTimeout(scrollText, scrollSpeed); } //調用函數 scrollText();
以上是常見的CSS滾動效果文字實現方式,可以根據需要選擇適合自己的方式進行使用,讓網頁更加生動有趣。