CSS3頁面切換：創造更多驚艷效果

CSS3作為前端開發人員必須掌握的技能之一，它能夠幫助我們創造更多令人驚艷的頁面效果。其中之一就是頁面切換效果。接下來我們來學習如何使用CSS3實現頁面切換。

頁面切換效果有很多種，我們可以利用CSS3中的過渡效果（transition）、動畫效果（animation）等屬性來實現。其中，利用過渡效果實現頁面切換是最常見的方法。

/* 過渡效果實現頁面切換 */
/* HTML */
<div class="content">
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
</div>
/* CSS */
.content {
position: relative;
width: 600px;
height: 400px;
}
/* 隱藏第二個頁面和第三個頁面 */
.content .page:nth-child(n+2) {
display: none;
}
/* 過渡效果，讓頁面切換時有平滑的過渡 */
.content .page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all .5s ease;
}
/* 當前頁面顯示出來 */
.content .page.show {
display: block;
}
/* 點擊按鈕時，讓下一個頁面顯示出來 */
.btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 第一個按鈕 */
.btn1 {
z-index: 10;
}
/* 點擊按鈕時，下一個頁面和當前頁面一起移動 */
.btn1:hover ~ .content .page:first-child,
.page.show ~ .content .page:first-child {
transform: translateX(-100%);
}
/* 第二個按鈕 */
.btn2 {
z-index: 20;
}
.btn2:hover ~ .content .page:nth-child(2),
.page.show ~ .content .page:nth-child(2) {
transform: translateX(-100%);
}
/* 第三個按鈕 */
.btn3 {
z-index: 30;
}
.btn3:hover ~ .content .page:nth-child(3),
.page.show ~ .content .page:nth-child(3) {
transform: translateX(-100%);
}

在這段代碼中，我們通過給每個頁面添加類名“page”來實現頁面切換。初始狀態下，第二個和第三個頁面被隱藏，我們可以通過修改CSS樣式來改變它們的顯示和隱藏。當我們點擊每個按鈕時，下一個頁面和當前頁面一起移動，同時利用過渡效果讓頁面切換有平滑的過渡效果。

需要注意的是，這只是一個簡單的頁面切換實現方式，在實際開發中，我們還需要根據實際需求來選擇合適的實現方式。