在網(wǎng)頁設(shè)計中，經(jīng)常需要在頁面中自動播放圖片，使得頁面更加生動和動態(tài)。CSS提供了一個很好的方法來實現(xiàn)這一功能。

html, body{
height: 100%;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow: hidden;
}
.slide{
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: slide 10s infinite;
}
.slide:nth-child(1){
background-image: url("image1.jpg");
}
.slide:nth-child(2){
background-image: url("image2.jpg");
}
.slide:nth-child(3){
background-image: url("image3.jpg");
}
@keyframes slide{
0%{
opacity: 0;
transform: scale(1.2);
}
5%{
opacity: 1;
transform: scale(1);
}
20%{
opacity: 1;
}
25%{
opacity: 0;
transform: scale(1.2);
}
100%{
opacity: 0;
transform: scale(1.2);
}
}

上述代碼通過CSS實現(xiàn)了圖片的自動播放功能，效果如下：

在代碼中，使用了flex布局使得圖片可以在容器中居中顯示。每張圖片都設(shè)置了為100%寬度和高度，等比例縮放以適應(yīng)容器。通過nth-child選擇器，為每張圖片設(shè)置不同的背景圖。在使用keyframes創(chuàng)建動畫時，設(shè)置了透明度和縮放倍數(shù)的變化，實現(xiàn)了圖片淡入淡出的效果。最后，通過animation屬性將動畫應(yīng)用到每張圖片上，循環(huán)播放。

使用CSS實現(xiàn)自動播放圖片，代碼簡潔易懂，而且可以在不使用JavaScript的情況下完成，一定程度上減輕了頁面的加載時間和服務(wù)器壓力，是一種很好的實現(xiàn)方式。