純CSS全屏輪播是一種無需JavaScript代碼即可實(shí)現(xiàn)的輪播效果。該效果通過 CSS3 的動(dòng)畫和過渡屬性來實(shí)現(xiàn)，因此它的兼容性和效率都非常優(yōu)秀。下面就讓我們來了解一下如何使用純CSS來實(shí)現(xiàn)全屏輪播。

/* HTML 結(jié)構(gòu) */
/* CSS 樣式 */
.fullscreen-slider {
position: relative;
height: 100vh;
overflow: hidden;
}
.slider-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.item1 {
background-image: url("image1.jpg");
animation: slide1 12s infinite;
}
.item2 {
background-image: url("image2.jpg");
animation: slide2 12s infinite;
}
.item3 {
background-image: url("image3.jpg");
animation: slide3 12s infinite;
}
@keyframes slide1 {
0% {
opacity: 0;
}
16.666% {
opacity: 1;
}
33.333% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes slide2 {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
66.666% {
opacity: 1;
}
83.333% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes slide3 {
0% {
opacity: 0;
}
83.333% {
opacity: 0;
}
100% {
opacity: 1;
}
}

如上所示，我們?cè)?HTML 中創(chuàng)建了一個(gè)全屏輪播容器，并在其中添加了三個(gè)輪播項(xiàng)。在 CSS 樣式中，我們先將容器高度設(shè)為 100vh（即屏幕高度），并將超出容器的內(nèi)容隱藏。接著，我們?yōu)檩啿ロ?xiàng)設(shè)置了絕對(duì)定位，使它們可以覆蓋在一起并進(jìn)入輪播狀態(tài)。

然后，我們?yōu)槊總€(gè)輪播項(xiàng)添加了不同的背景圖片，并為它們分別定義了一個(gè)不同的動(dòng)畫，這些動(dòng)畫分別對(duì)應(yīng)著不同的輪播順序。例如，第一個(gè)輪播項(xiàng)的動(dòng)畫名為“slide1”，時(shí)間為 12 秒，循環(huán)次數(shù)為 infinite，即無限循環(huán)。

最后，我們?cè)?CSS 樣式中使用了 @keyframes 屬性，定義了每個(gè)輪播項(xiàng)在不同時(shí)間點(diǎn)的透明度，以及相應(yīng)的過渡效果。通過這些 CSS 動(dòng)畫和過渡屬性，全屏輪播效果得以實(shí)現(xiàn)。