圖片自動(dòng)輪播是網(wǎng)站設(shè)計(jì)中常用的功能之一，通常需要使用CSS來(lái)實(shí)現(xiàn)。下面就讓我們來(lái)看一下如何使用CSS實(shí)現(xiàn)圖片自動(dòng)輪播的效果。

/*設(shè)置圖片輪播容器的寬度和高度*/
.carousel {
width: 100%;
height: 500px;
overflow: hidden;
position: relative;
}
/*設(shè)置圖片寬度和高度*/
.carousel img {
width: 100%;
height: auto;
}
/*為每張圖片設(shè)置絕對(duì)定位*/
.carousel img:nth-child(1) {
position: absolute;
top: 0;
left: 0;
opacity: 1;
}
.carousel img:nth-child(2) {
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation: slide 6s infinite;
}
.carousel img:nth-child(3) {
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation: slide 6s infinite;
}
/*設(shè)置圖片輪播動(dòng)畫(huà)*/
@keyframes slide {
25% {
opacity: 1;
}
30% {
opacity: 0;
}
55% {
opacity: 0;
}
60% {
opacity: 1;
}
}

以上代碼實(shí)現(xiàn)的效果是，圖片容器.carousel的高度為500px，圖片寬度為100%，每張圖片的寬度會(huì)隨著屏幕的大小改變而自適應(yīng)，第一張圖片的opacity為1，其他兩張圖片的opacity為0，第二張和第三張圖片會(huì)無(wú)限循環(huán)輪播，輪播時(shí)間為6秒。