在CSS中,可以使用動畫和關鍵幀來實現(xiàn)一張或多張圖片的自動滾動效果。以下是實現(xiàn)該效果的代碼:
.container{ width: 500px; height: 300px; overflow: hidden; position: relative; } .container img{ position: absolute; left: 0px; top: 0px; animation: scroll 20s linear infinite; } @keyframes scroll{ from{left: 0px;} to{left: -1500px;} }
該代碼中,我們首先定義了一個容器,容器的寬度為500像素,高度為300像素,同時設置overflow:hidden,使其能夠裁剪內容溢出,實現(xiàn)滾動效果。接下來我們使用Position屬性將圖片定位到容器的左上角,并設置動畫屬性animation來實現(xiàn)自動滾動效果。最后我們使用關鍵幀@keyframes來定義動畫效果,使圖片從左到右不斷滾動。通過這種方式,我們可以方便地實現(xiàn)圖片的自動滾動效果。