元素內(nèi)部，添加一個元素，用于顯示圖片。

編寫HTML代碼

1、創(chuàng)建一個HTML文件，例如scrollingimage.html。

2、在文件中添加以下代碼：

注意：請將yourimagesource.jpg替換為你的圖片源地址。

編寫CSS代碼

1、在同一目錄下創(chuàng)建一個名為styles.css的文件。

2、在文件中添加以下代碼：

body {
    margin: 0;
    padding: 0;
}
.scrollingimage {
    position: relative;
    width: 100%;
    height: 300px; /* 根據(jù)需要調(diào)整高度 */
    overflow: hidden;
}
.scrollingimage img {
    position: absolute;
    minwidth: 100%;
    animation: scrolling 5s linear infinite;
}
@keyframes scrolling {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(100%);
    }
}

這段代碼定義了一個名為scrollingimage的類，該類具有相對定位、寬度為100%、溢出隱藏等屬性，它還定義了一個名為scrolling的關(guān)鍵幀動畫，該動畫將在5秒內(nèi)將圖片從右側(cè)移動到左側(cè)，實現(xiàn)滾動效果，我們將這個動畫應(yīng)用到元素上，使其無限循環(huán)播放。

測試和優(yōu)化

1、保存HTML和CSS文件，然后用瀏覽器打開scrollingimage.html文件，查看滾動圖片效果，如果一切正常，你應(yīng)該可以看到一張圖片從右側(cè)滾動到左側(cè)。

2、如果需要調(diào)整滾動速度、方向或其他效果，可以修改CSS代碼中的相關(guān)屬性和關(guān)鍵幀，可以通過修改animation屬性的值來調(diào)整動畫的持續(xù)時間和速度：

animation: scrolling 2s linear infinite; /* 將動畫速度調(diào)整為2秒 */

或者通過修改關(guān)鍵幀的值來調(diào)整滾動方向：

@keyframes scrolling {
    0% {
        transform: translateX(100%); /* 將圖片從左側(cè)滾動到右側(cè) */
    }
    100% {
        transform: translateX(100%); /* 將圖片從右側(cè)滾動到左側(cè) */
    }
}

3、如果需要添加多張圖片并實現(xiàn)輪播效果，可以使用JavaScript或jQuery來實現(xiàn)，這里不再詳細展開，可以參考相關(guān)教程進行學(xué)習(xí)。

文章標(biāo)題：html如何做滾動圖片
文章起源：http://uogjgqi.cn/article/dhghigj.html