CSS3頁面切換效果

在CSS3中，我們可以利用過渡（transition）和動畫（animation）來實現(xiàn)頁面切換效果，下面我們將詳細介紹如何使用這些技術來創(chuàng)建平滑的頁面切換。

1. 過渡（Transition）

過渡是CSS3中用于在元素狀態(tài)改變時提供平滑效果的技術，我們可以利用過渡來實現(xiàn)頁面切換。

示例：

假設我們有兩個頁面，分別為page1.html和page2.html，我們可以通過以下CSS代碼來實現(xiàn)從page1.html到page2.html的切換效果：

/* 定義過渡效果 */
.transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: opacity 1s;
}
/* 當頁面切換時，將opacity從0變?yōu)? */
.transition.show {
  opacity: 1;
}

然后在JavaScript中控制這個過渡效果：

// 假設我們有一個按鈕來觸發(fā)頁面切換
var btn = document.getElementById('switch-page-btn');
var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');
// 添加過渡效果到page1和page2
page1.classList.add('transition');
page2.classList.add('transition');
// 當按鈕被點擊時，移除page1的過渡效果并添加page2的過渡效果
btn.addEventListener('click', function() {
  page1.classList.remove('transition');
  page2.classList.add('transition');
});

2. 動畫（Animation）

動畫是CSS3中更強大的一個特性，它允許你創(chuàng)建復雜的動畫序列，我們可以利用動畫來實現(xiàn)更復雜的頁面切換效果。

示例：

假設我們有一個簡單的頁面布局，包含兩個主要部分：header和content，我們可以通過以下CSS代碼來實現(xiàn)從header到content的切換效果：

/* 定義動畫關鍵幀 */
@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
/* 應用動畫到content */
.content {
  position: relative;
  top: -100%; /* 初始位置 */
  animation: slide-up 1s; /* 動畫名稱、持續(xù)時間 */
}

然后在JavaScript中控制這個動畫效果：

// 假設我們有一個按鈕來觸發(fā)頁面切換
var btn = document.getElementById('switch-page-btn');
var header = document.getElementById('header');
var content = document.getElementById('content');
// 添加動畫效果到content，并移除header的顯示屬性
content.style.display = 'none'; // 初始隱藏content部分
header.style.display = 'block'; // 初始顯示header部分
// 當按鈕被點擊時，移除header的顯示屬性并添加content的動畫效果
btn.addEventListener('click', function() {
  header.style.display = 'none'; // 移除header的顯示屬性使其隱藏
  content.style.display = 'block'; // 添加content的動畫效果使其顯示并滑動到合適的位置
});

CSS3提供了強大的過渡和動畫特性，可以用來實現(xiàn)各種頁面切換效果，通過巧妙地使用這些技術，我們可以創(chuàng)建出令人印象深刻的用戶體驗，希望這篇文章能幫助你更好地理解和應用CSS3來實現(xiàn)頁面切換。