CSS全屏輪翻圖是網頁設計中很常見的一種效果。這種效果可以使網頁內容更加生動、吸引人，并且展示商品、服務等信息也更直觀。下面我們將介紹如何使用CSS實現全屏輪翻圖的效果。

.container {
height: 100vh;
width: 100%;
overflow: hidden;
position: relative;
}
.slide {
height: 100vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s;
}
.slide.active {
opacity: 1;
}

首先，需要在HTML文件中創建一個容器元素，設置它的高度為100vh（表示占據整個屏幕的高度），寬度為100%，并設置overflow為hidden以隱藏容器外的內容。然后，需要在容器中創建多個滑動元素（即輪播圖），每個滑動元素通過絕對定位進行定位。它們的高度和寬度都應該與容器相同，同時需要設置不透明度為0，以便隱藏除了活動滑動元素以外的元素。

接著，需要在CSS文件中添加.active類，該類用于指定當前活動的滑動元素。該類設置滑動元素的不透明度為1，以使其能夠顯示出來。當切換到下一個滑動元素時，需要同時從前一個滑動元素刪除.active類，并將其不透明度設置為0，同時給下一個滑動元素添加.active類，從而使下一個滑動元素透明度變成1，呈現出滑動的效果。

const slides = document.querySelectorAll('.slide');
function setActiveSlide() {
const activeSlide = document.querySelector('.slide.active');
activeSlide.classList.remove('active');
const nextSlide = activeSlide.nextElementSibling || slides[0];
nextSlide.classList.add('active');
}
setInterval(() =>{
setActiveSlide();
}, 5000);

最后，需要使用JavaScript代碼對輪播進行控制。在這個例子中，我們創建了一個setActiveSlide函數，通過操作類名的方式實現滑動元素的切換。我們使用JavaScript定時器來輪流調用setActiveSlide函數，從而實現輪播圖的滾動。在這個例子中，我們每隔5秒鐘就會自動滾動一次。