CSS實現文字向左滾動,其實可以通過CSS3動畫屬性來實現。下面是一段簡單的示例代碼:
<style> .scroll { width: 100%; overflow: hidden; white-space: nowrap; animation: marquee 10s linear infinite; } @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } </style> <div class="scroll"> <p>這是一段需要滾動的文字,可以是一句話,也可以是一段長篇文章。</p> </div>
首先,我們需要創建一個容器,并設置它的寬度為100%,overflow為hidden,這樣可以保證容器內的文字超出容器范圍時不會溢出。同時,將其內部的空白設置為nowrap,這樣可以保證容器內文字不會自動換行。
接著,我們使用CSS3動畫屬性animation來定義文字滾動的動畫效果。在這個例子中,我們定義了一個名為marquee的動畫,其中包括兩個關鍵幀:0%和100%。在0%時,我們將文字通過transform屬性向右平移100%(即平移到容器右側以外),在100%時,我們將文字通過transform屬性向左平移100%(即平移到容器左側以外),這樣就形成了無限滾動的效果。
最后,在容器的class屬性中添加scroll類,即可實現文字向左滾動的效果。