CSS可以實現一些很有趣的效果,比如長圖片滾動。長圖片滾動是指當圖片高度超出容器高度時,通過一定的方式讓圖片在容器內滾動起來。下面介紹一種實現長圖片滾動的CSS方法。
.container { height: 300px; overflow: hidden; } img { position: relative; top: -100%; animation: scroll 10s linear infinite; } @keyframes scroll { 0% { top: -100%; } 100% { top: 0%; } }
首先,需要一個固定高度的容器,設置overflow: hidden屬性,使得超出容器高度的部分被隱藏。
接著,圖片需要設置為相對定位,top屬性設置為負數,使得圖片初始化時被隱藏在容器上面。然后,通過animation屬性設置一個動畫,讓圖片從上往下滾動。這里的動畫時間設為10秒,線性運動,無限循環。
最后,定義一個名為scroll的關鍵幀動畫,控制圖片的滾動。關鍵幀0%時,圖片的top值設置為-100%,也就是圖片的初始位置;關鍵幀100%時,圖片的top值設置為0%,也就是圖片滾動到容器底部的位置。
以上就是使用CSS實現長圖片滾動的方法,簡單易懂。可以根據需要進行自定義的修改,適應不同的場景。
下一篇css實現鼠標經過事件