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

/* HTML 結構 */
/* 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;
}
}

如上所示，我們在 HTML 中創建了一個全屏輪播容器，并在其中添加了三個輪播項。在 CSS 樣式中，我們先將容器高度設為 100vh（即屏幕高度），并將超出容器的內容隱藏。接著，我們為輪播項設置了絕對定位，使它們可以覆蓋在一起并進入輪播狀態。

然后，我們為每個輪播項添加了不同的背景圖片，并為它們分別定義了一個不同的動畫，這些動畫分別對應著不同的輪播順序。例如，第一個輪播項的動畫名為“slide1”，時間為 12 秒，循環次數為 infinite，即無限循環。

最后，我們在 CSS 樣式中使用了 @keyframes 屬性，定義了每個輪播項在不同時間點的透明度，以及相應的過渡效果。通過這些 CSS 動畫和過渡屬性，全屏輪播效果得以實現。