CSS圖片自動平移效果是一種非常炫酷的動畫效果，可以讓網頁更加吸引人眼球。本文將介紹如何使用CSS實現圖片自動平移效果。

.box {
position: relative; /* 顯示屬性必須為relative、absolute或fixed */
width: 500px;
height: 500px;
margin: 0 auto;
overflow: hidden; /* 允許元素溢出時隱藏內容 */
}
.img {
position: absolute;
width: 800px;
height: 500px;
/* 設置背景圖，這里使用了一個旅游風景圖片 */
background-image: url('https://example.com/travel.jpg');
animation: translateX 25s linear infinite; /* 定義動畫 */
}
/* 定義動畫 */
@keyframes translateX {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-300px);
}
}

首先定義一個容器.box，設置寬高以及溢出隱藏。然后在容器中定義一個圖片元素.img，以絕對定位的方式設置寬高和背景圖片。接下來定義一個動畫@keyframes translateX，其中@keyframes是動畫關鍵字，translateX是自定義動畫名稱。在動畫中設置初始值和結束值，這里使用transform屬性控制圖片平移效果。最后在.img元素中使用animation屬性，將動畫和元素綁定即可。

總之，CSS圖片自動平移效果是一種很棒的動畫效果，不僅可以提升網站的美感，也能讓用戶對網站有更深刻的印象。如果您想讓您的網站更加生動有趣，那么嘗試實現CSS圖片自動平移效果吧！