CSS幾張圖片自動(dòng)播放效果是現(xiàn)在網(wǎng)站設(shè)計(jì)中的一個(gè)比較常見(jiàn)的設(shè)計(jì)方案，尤其是在輪播圖或者幻燈片展示方面幾乎是標(biāo)配，那么如何實(shí)現(xiàn)這個(gè)效果呢？這里就給大家介紹一個(gè)CSS實(shí)現(xiàn)幾張圖片自動(dòng)播放的示例。

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部分，需要?jiǎng)?chuàng)建一個(gè)包含所有要展示圖片的元素，這里我們使用flex布局進(jìn)行居中對(duì)齊并設(shè)置高度為100%。接著每個(gè)要展示的圖片都需要用img標(biāo)簽進(jìn)行包裹，并設(shè)置寬度、高度、外邊距與陰影等樣式。

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

最終，我們?cè)诰W(wǎng)頁(yè)中看到的效果就是逐漸滑動(dòng)的幾張圖片，非常生動(dòng)有趣。