CSS圖片無縫向左滾動 最近，很多網站都在運用無縫滾動效果來增強用戶的體驗感。圖片無縫向左滾動是其中的一種常見技術。這篇文章將教您如何用CSS實現這一效果。 首先，我們需要一張圖片來演示。假設我們的圖片名為"example.jpg"，圖片的寬度為500px，高度為250px。其中，寬度為我們滾動效果的關鍵因素。 接著，我們需要在HTML頁面中添加一個div來承載圖片：

<div class="img-wrapper">
<img src="example.jpg">
</div>

接下來，我們將通過CSS來設置這個div的樣式：

.img-wrapper {
overflow: hidden;   // 隱藏圖片溢出的部分
width: 500px;   // 設置div寬度為圖片寬度
height: 250px;   // 設置div高度為圖片高度
}
.img-wrapper img {
float: left;   // 讓圖片向左浮動
}

現在，我們在div中承載了一張圖片，并將其浮動到了左側。接下來，我們需要一個CSS動畫來實現無縫滾動效果。 下面是CSS動畫的代碼：

@keyframes scroll {
from { transform: translateX(0); }   // 圖片開始的位置
to { transform: translateX(-500px); }   // 圖片結束的位置
}
.img-wrapper img {
animation: scroll 10s linear infinite;   // 每10秒執行一遍動畫
}

這段代碼使用了關鍵幀動畫來定義了從0到-500px平移的動畫。同時，我們將它賦給了.img-wrapper img元素，并設置了10秒的間隔和無限循環。 以上的代碼已經可以實現一張圖片無縫向左滾動的效果，如果你需要使用多張圖片，可以將它們放在一個容器里，并將每個圖片的寬度相加作為容器的寬度即可。 總結 在本文中，我們實現了一張圖片無縫向左滾動的效果。通過CSS設置圖片所在元素的寬度，并將圖片浮動到左側，然后通過關鍵幀動畫來實現無限滾動的效果。這是一個簡單而實用的技術，非常適合制作一些圖片內容較多的網站。