CSS圖片自動變化是一種將多張圖片輪流展示在同一個位置上的效果。

要實現(xiàn)這個效果，我們需要使用CSS的animation和@keyframes屬性。以下是一個簡單的代碼示例：

/* 定義一個名為“rotate”動畫，持續(xù)時間為5秒 */
@keyframes rotate {
0% {
/* 初始狀態(tài)為第一張圖片 */
background-image: url("first-image.jpg");
}
50% {
/* 中間狀態(tài)為第二張圖片 */
background-image: url("second-image.jpg");
}
100% {
/* 最終狀態(tài)為第三張圖片 */
background-image: url("third-image.jpg");
}
}
/* 將動畫應(yīng)用到一個容器上 */
.container {
/* 設(shè)置容器的寬度與高度 */
width: 300px;
height: 200px;
/* 設(shè)置背景圖片的平鋪方式為“嚴格平鋪” */
background-repeat: no-repeat;
/* 設(shè)置背景圖片的水平與垂直居中 */
background-position: center center;
/* 開始動畫，持續(xù)時間為5秒，循環(huán)無限次 */
animation: rotate 5s infinite;
}

在上述代碼中，我們首先定義了一個名為“rotate”的動畫，其中通過@keyframes屬性設(shè)置了三個階段，分別是初始狀態(tài)、中間狀態(tài)和最終狀態(tài)，每個狀態(tài)對應(yīng)一張圖片。

接著，我們將這個動畫應(yīng)用到一個名為“container”的div容器上，通過CSS的animation屬性指定動畫的名稱、持續(xù)時間和循環(huán)次數(shù)。這樣，在頁面加載后，該容器就會自動播放多張圖片，并且會持續(xù)循環(huán)。

最后，我們通過CSS的background-image屬性設(shè)置每個狀態(tài)下的背景圖片，并且通過background-repeat和background-position屬性進行適當?shù)牟季趾蜆邮皆O(shè)置。