CSS可以通過一些屬性實現內容的滾動。其中比較常用的屬性是overflow、white-space以及animation等。
/* 設置元素的尺寸 */ .scroll { width: 300px; height: 200px; } /* 隱藏溢出的內容 */ .scroll { overflow: hidden; } /* 設置文本不換行 */ .scroll { white-space: nowrap; } /* 實現滾動 */ @keyframes scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } .scroll > p { animation: scroll linear 5s infinite; }
上述代碼實現了一個高度為200px、寬度為300px的容器內部文本的滾動效果。overflow屬性設置為hidden,表示隱藏元素溢出的內容;white-space屬性設置為nowrap,表示元素內部文本不換行。接下來的動畫通過translateY屬性實現豎直方向上的移動,并實現循環滾動。
當然,上述代碼只是實現了一個簡單的滾動效果,具體還需要根據實際情況進行調整。例如,可以通過JavaScript或CSS計算元素內部文本的實際高度,從而自適應滾動;還可以通過設置動畫延遲、持續時間等屬性,控制滾動速度。
下一篇div 可拖拽