CSS中的動畫效果可以讓網頁更加生動有趣。而圖片連續播放動畫則可以讓網頁更具視覺沖擊力。下面就讓我們看看如何使用CSS實現圖片連續播放動畫吧。

/* 定義圖片序列 */
@keyframes animation {
0% {background-image: url("image1.jpg");}
20% {background-image: url("image2.jpg");}
40% {background-image: url("image3.jpg");}
60% {background-image: url("image4.jpg");}
80% {background-image: url("image5.jpg");}
100% {background-image: url("image6.jpg");}
}
/* 定義動畫屬性 */
.animation {
animation-name: animation;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* 定義顯示區域 */
.box {
width: 500px;
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}

在上面的代碼中，我們使用了@keyframes定義了一個名為animation的動畫序列，里面包含了圖片的序列和關鍵幀時間點。

接著，我們定義了一個名為animation的類，指定了動畫屬性。其中animation-name為剛才定義的動畫序列名稱，animation-duration為動畫播放時長，animation-timing-function為動畫播放速度曲線，animation-iteration-count為動畫播放總次數。

最后，我們定義了一個名為box的類，指定了顯示區域的大小以及圖片平鋪和大小等屬性。將animation類應用于box類后，圖片就能夠自動連續播放啦！