CSS切頁可以讓一個網站或者應用程序變得更加美觀和易用。下面我們來看一些優美的CSS切頁的例子。

.tab {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
background-color: #F6F6F6;
border-radius: 20px;
overflow: hidden;
}
.tab button {
border: 0;
outline: 0;
background-color: transparent;
cursor: pointer;
font-size: 16px;
color: #676767;
padding: 10px 20px;
transition: color 0.2s ease-out;
}
.tab button.active {
color: #007AFF;
}
.tab-content {
position: relative;
height: 200px;
width: 100%;
}
.tab-content >div {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: opacity 0.2s ease-out;
}
.tab-content >div.active {
opacity: 1;
}

上述代碼實現了一個簡單的標簽頁效果。外包含一個.tab元素，它里面有若干個button元素，每個button代表一個標簽頁。然后，使用CSS所提供的flex布局技巧將button規整排列，并套用簡單的漸變背景色及文字變換效果實現頁面視覺上的變化。最后，通過tab-content元素及其下面的子元素來顯示或者隱藏標簽頁對應的內容。當點擊相應標簽頁按鈕時，使用JS動態修改CSS的.class名稱實現標簽頁的切換，同時改變tab-conent下的標簽內容DIV的狀態以實現對應顯示狀態切換。

優美的CSS切頁不僅可以美化我們的網站或者應用程序，還可以增加用戶體驗和交互性。我們可以參考其他網站的設計樣式，學習各種CSS技巧，創造出自己的獨特風格的切頁效果。