CSS滑動翻頁效果是一種很酷的頁面設計，可以讓你的訪問者感到非常流暢和舒適。接下來，我們就來學習一下如何使用CSS實現這個效果。

/* 創建一個container的div，用來包裹我們的頁面 */
.container {
position: relative;
height: 100vh; /*設置高度為視口高度*/
width: 100vw; /*設置寬度為視口寬度*/
overflow: hidden; /*隱藏超出容器的內容*/
/*使整個容器成為Flex容器*/
display: flex; 
flex-direction: column; 
justify-content: space-between; 
}
/*創建一個滑動按鈕，以便我們可以點擊切換頁面*/
.scroll-down {
position: absolute;
bottom: 0; /*將元素放置在容器的底部*/
left: 50%; /*放置在容器中央*/
transform: translateX(-50%); /*水平居中*/
}
/*使按鈕形狀為箭頭*/
.scroll-down:before {
content: "\2193";
font-size: 30px;
color: #fff;
}

現在，我們已經創建好了一個基本的容器和按鈕，接下來，我們需要添加滑動觸發效果，以便可以滑動到下一頁。

/*響應滾動事件，用來設置容器的位置*/
$(window).bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type === 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type === 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
/*創建CSS動畫，實現頁面的滑動效果*/
@keyframes slide-down {
0% {
transform: translateY(-100%); 
}
100% {
transform: translateY(0);
}
}
/*為每個頁面添加滑動效果*/
.page {
height: 100vh;
position: relative;
animation: slide-down 0.5s ease forwards; /*向下滑動0.5秒*/
}
.page:nth-child(even) {
background-color: #000;
color: #fff;
}
.page:nth-child(odd) {
background-color: #fff;
color: #000;
}

好了！現在我們已經為頁面創建了簡單的HTML結構和基本的CSS設計，以便我們可以創建一個流暢的滑動翻頁效果。

在這里，我們已經使用兩個動態的CSS屬性來創建完整的效果：

Flex：在容器中使用Flexbox結構的屬性，這個屬性讓頁面更易于設計和響應

Animation：使用CSS動畫來實現滾動效果；這個屬性可以使頁面看起來更加流暢和自然