在CSS中,通過以下代碼可實現左右不停滾動的動畫效果:
.scroll { white-space: nowrap; overflow: hidden; animation: scroll 10s linear infinite; } @keyframes scroll { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }
以上代碼中,首先通過設置white-space為nowrap,使得文字不會自動換行。然后通過overflow:hidden屬性隱藏多余的部分,使得文字只能在該元素的固定區(qū)域內顯示。接著,通過animation屬性,設置動畫效果,即scroll10s linear infinite,表示以線性的方式,每10秒無限循環(huán)滾動。最后,在@keyframes中定義滾動的動畫效果,從0%到100%平移距離為-100%。
在HTML中,僅需將需要滾動的文字包裹在一個指定class的div中,如下所示:
<div class="scroll"> 這里是需要左右滾動的文字 </div>
這樣即可輕松實現左右不停滾動的效果。