在CSS中,我們可以使用@keyframes
規(guī)則來創(chuàng)建動(dòng)畫,從而實(shí)現(xiàn)圖片的滾動(dòng)效果,以下是一個(gè)簡單的示例:
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .scroll-container { width: 100%; height: 200px; overflow: hidden; position: relative; } .scroll-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; animation: scroll 10s linear infinite; }
在這個(gè)示例中,我們創(chuàng)建了一個(gè)名為scroll
的動(dòng)畫,該動(dòng)畫將圖片從左側(cè)滾動(dòng)到右側(cè),我們將該動(dòng)畫應(yīng)用到了.scroll-container img
元素上,實(shí)現(xiàn)了圖片的滾動(dòng)效果。
需要注意的是,在實(shí)際應(yīng)用中,我們可能需要根據(jù)具體的需求來調(diào)整動(dòng)畫的持續(xù)時(shí)間、速度曲線等參數(shù),我們還需要確保圖片的尺寸與容器相匹配,并且圖片的內(nèi)容適合滾動(dòng)展示。