CSS輪播是一種常用的實(shí)現(xiàn)圖片切換的方法。下面我們來介紹一下它的樣式。

/* 輪播容器的樣式 */
.carousel {
width: 800px;   /* 輪播容器的寬度 */
height: 400px;  /* 輪播容器的高度 */
position: relative; /* 輪播容器相對(duì)定位 */
}
/* 圖片的樣式 */
.carousel img {
width: 100%;    /* 圖片寬度占滿容器 */
height: 100%;   /* 圖片高度占滿容器 */
object-fit: cover;  /* 圖片按比例縮放 */
position: absolute; /* 圖片絕對(duì)定位 */
top: 0; /* 圖片垂直居中 */
left: 0;    /* 圖片水平居中 */
opacity: 0; /* 圖片初始透明度為0，由于后續(xù)要進(jìn)行動(dòng)畫，所以初始為0 */
}
/* 顯示當(dāng)前圖片的樣式 */
.carousel img.current {
opacity: 1; /* 把當(dāng)前圖片的透明度改為1，讓它顯示 */
z-index: 1; /* 把當(dāng)前圖片的z-index改為1，確保它在最前面 */
transition: opacity .5s ease-in-out; /* 讓當(dāng)前圖片的顯示有一個(gè)漸變效果，時(shí)間為0.5秒 */
}
/* 顯示下一張圖片的樣式 */
.carousel img.next {
opacity: 1; /* 把下一張圖片的透明度改為1，為顯示做準(zhǔn)備 */
z-index: 2; /* 把下一張圖片的z-index改為2，確保它在當(dāng)前圖片上面 */
animation: next .5s ease-in-out; /* 給下一張圖片添加動(dòng)畫效果，時(shí)間為0.5秒 */
}
/* 顯示上一張圖片的樣式 */
.carousel img.prev {
opacity: 1; /* 把上一張圖片的透明度改為1，為顯示做準(zhǔn)備 */
z-index: 0; /* 把上一張圖片的z-index改為0，把它放在當(dāng)前圖片下面，確保它不會(huì)影響下一張圖片的顯示 */
animation: prev .5s ease-in-out; /* 給上一張圖片添加動(dòng)畫效果，時(shí)間為0.5秒 */
}
/* 圖片向左滑動(dòng)的動(dòng)畫 */
@keyframes next {
from {
left: 100%; /* 從右邊100%的位置開始滑動(dòng) */
}
to {
left: 0;    /* 滑動(dòng)到左邊0%的位置 */
}
}
/* 圖片向右滑動(dòng)的動(dòng)畫 */
@keyframes prev {
from {
left: -100%; /* 從左邊100%的位置開始滑動(dòng) */
}
to {
left: 0;    /* 滑動(dòng)到右邊0%的位置 */
}
}
/* 左右按鈕的樣式 */
.carousel .btn {
width: 50px;    /* 左右按鈕的寬度 */
height: 50px;   /* 左右按鈕的高度 */
position: absolute; /* 左右按鈕絕對(duì)定位 */
top: 50%;   /* 左右按鈕垂直居中 */
transform: translateY(-50%); /* 左右按鈕上下居中 */
background-color: rgba(0,0,0,.5);   /* 左右按鈕設(shè)置半透明黑色背景 */
color: #fff;    /* 左右按鈕設(shè)置白色字體 */
font-size: 24px;    /* 左右按鈕設(shè)置字體大小為24像素 */
text-align: center; /* 左右按鈕文字居中對(duì)齊 */
cursor: pointer;    /* 鼠標(biāo)懸浮左右按鈕時(shí)顯示手型 */
}
/* 左按鈕的樣式 */
.carousel .btn.left {
left: 0;    /* 左按鈕靠左顯示 */
}
/* 右按鈕的樣式 */
.carousel .btn.right {
right: 0;   /* 右按鈕靠右顯示 */
}