CSS是一種用來描述網(wǎng)頁樣式的語言，可以設(shè)置各種效果，包括頁面翻頁效果。下面就來介紹一下如何使用CSS來設(shè)置翻頁效果。

/*設(shè)置基礎(chǔ)樣式*/
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/*設(shè)置分頁容器*/
.page {
width: 100vw;
height: 100vh;
position: relative;
color: #333;
font-size: 24px;
}
/*設(shè)置下一頁按鈕*/
.next {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 16px;
color: #999;
cursor: pointer;
}
/*設(shè)置翻頁動畫*/
.page.active {
animation: turnPage 1s ease-in-out forwards;
}
@keyframes turnPage {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(90deg);
}
100% {
transform: rotateY(180deg);
}
}

代碼中，我們首先設(shè)置了基礎(chǔ)樣式，包括去除頁面的margin和padding，并隱藏水平滾動條。接著設(shè)置了分頁容器的樣式，包括寬高、定位、字體顏色和大小。下一頁按鈕也被賦予了基本樣式，定位在頁面右下角，字體和顏色都比較淡。最后是最關(guān)鍵的翻頁動畫設(shè)置，我們使用了CSS3的旋轉(zhuǎn)效果和動畫功能，將頁面沿Y軸轉(zhuǎn)180度，實現(xiàn)了像翻書一樣的效果。

使用示例：

<div class="page">
<p>第一頁</p>
<div class="next" onclick="turnPage()">下一頁</div>
</div>
<div class="page">
<p>第二頁</p>
<div class="next" onclick="turnPage()">下一頁</div>
</div>
...
<script>
var pages = document.querySelectorAll('.page');
var currentPage = 0;
function turnPage() {
pages[currentPage].classList.remove('active');
currentPage++;
if (currentPage >= pages.length) currentPage = 0;
pages[currentPage].classList.add('active');
}
</script>

使用時，我們需要根據(jù)實際情況創(chuàng)建分頁容器，并在每個容器內(nèi)添加需要顯示的內(nèi)容。下一頁按鈕通過JavaScript代碼來實現(xiàn)，將當前頁面的.active類去除，再將下一頁的.active類添加進去，即可觸發(fā)翻頁動畫。

總之，使用CSS來設(shè)置翻頁效果非常簡單，只需要一些基礎(chǔ)的樣式設(shè)置和動畫效果就能實現(xiàn)，而且還可以根據(jù)實際情況進行自定義和擴展。