CSS幾張圖片自動播放效果是現在網站設計中的一個比較常見的設計方案，尤其是在輪播圖或者幻燈片展示方面幾乎是標配，那么如何實現這個效果呢？這里就給大家介紹一個CSS實現幾張圖片自動播放的示例。

html{
height: 100%;
}
body{
height: 100%;
}
.slideshow {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.slideshow img {
width: 800px;
max-height: 500px;
object-fit: contain;
margin-right: 30px;
box-shadow: 0 0 10px rgba(0, 0, 0, .7);
}
@keyframes slide {
0% {
transform: translateX(0);
}
20% {
transform: translateX(0);
}
25% {
transform: translateX(-100%);
}
45% {
transform: translateX(-100%);
}
50% {
transform: translateX(-200%);
}
70% {
transform: translateX(-200%);
}
75% {
transform: translateX(-300%);
}
95% {
transform: translateX(-300%);
}
100% {
transform: translateX(-400%);
}
}
.slideshow img {
animation: slide 15s linear infinite;
}

首先是HTML部分，需要創建一個包含所有要展示圖片的元素，這里我們使用flex布局進行居中對齊并設置高度為100%。接著每個要展示的圖片都需要用img標簽進行包裹，并設置寬度、高度、外邊距與陰影等樣式。

CSS部分是關鍵，這里我們使用了@keyframes設置動畫名稱，然后在其中設置了每張圖片的動畫效果，其中transform: translateX(n%)代表將圖片在水平方向上平移n個百分比的距離。注意，這里的動畫效果分別在20%、25%、45%、50%、70%、75%、95%、100%進行切換，每隔5秒進行一次切換，因此需要設置animation: slide 15s linear infinite;。

最終，我們在網頁中看到的效果就是逐漸滑動的幾張圖片，非常生動有趣。