CSS是網頁設計中非常重要的一個組成部分，它可以為網頁添加各種各樣的樣式。除此之外，CSS還可以實現網頁之間的頁面切換效果，為網頁增添視覺上的提升。

下面是一個使用CSS實現頁面切換效果的示例，代碼如下：

/* 初始樣式 */
.page {
opacity: 0; /* 元素透明 */
position: absolute; /* 絕對定位 */
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: all 0.5s ease; /* 過渡效果 */
}
/* 激活樣式 */
.page.active {
opacity: 1; /* 元素不透明 */
}

在上面的代碼中，我們定義了一個初始樣式和一個激活樣式。初始樣式設置了元素的透明度為0，將元素絕對定位并設置為占據整個頁面，使用transition過渡效果，以實現頁面切換時的動畫效果。激活樣式則將元素的透明度設置為1，使其顯示在頁面上。

在HTML中，我們需要將頁面元素添加到一個容器中，并使用JavaScript控制頁面元素的切換。例如：

<div class="container">
<div class="page active">第一頁</div>
<div class="page">第二頁</div>
<div class="page">第三頁</div>
</div>

在JavaScript中，我們可以使用classList屬性來控制頁面元素的激活樣式。例如：

var pages = document.querySelectorAll('.page');
function setActivePage(index) {
for (var i = 0; i < pages.length; i++) {
pages[i].classList.remove('active');
}
pages[index].classList.add('active');
}
// 切換到第二頁
setActivePage(1);

在上面的代碼中，我們定義了一個setActivePage函數，用來控制頁面元素的激活樣式。該函數接受一個參數index，表示需要激活的頁面元素的索引。函數首先使用querySelectorAll方法查找所有class為page的頁面元素，然后循環遍歷這些元素，將它們的active樣式移除。最后，將指定索引的頁面元素添加active樣式，以激活該頁面。

使用CSS實現頁面切換效果十分簡單，只需要定義好初始樣式和激活樣式，然后使用JavaScript控制頁面元素的切換即可。這種方式不僅可以增加網頁的視覺美感，還可以提升用戶體驗。