CSS翻頁動畫是網(wǎng)頁設(shè)計中常用的一種動畫效果，它能夠讓頁面更加生動有趣。本文將介紹如何使用CSS來實現(xiàn)翻頁動畫。

/* 先定義一個包含兩個頁面的容器 */
.container{
position: relative;
width: 600px;
height: 400px;
perspective: 1000px; /* 3D透視距離 */
}
/* 頁面的樣式 */
.page{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}
/* 第一頁和第二頁的不同樣式 */
.page1{
z-index: 1;
transform-origin: right;
transform: rotateY(0deg);
}
.page2{
z-index: 2;
transform-origin: left;
transform: rotateY(-180deg);
}

上述代碼中，我們定義了一個包含兩個頁面的容器，并設(shè)置了頁面的樣式。頁面1的z-index值為1，頁面2的z-index值為2，這樣頁面2就會覆蓋頁面1。同時，我們還定義了頁面1和頁面2的不同樣式，這兩個頁面的區(qū)別在于頁面2要翻轉(zhuǎn)180度。

/* 添加動畫效果 */
.container:hover .page1{
animation: flip 1s ease-in-out forwards;
}
.container:hover .page2{
animation: flip 1s ease-in-out forwards;
}
/* 定義動畫 */
@keyframes flip{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(180deg);
}
}

接著，我們?yōu)槿萜魈砑觝over事件，鼠標懸停在容器上時，就會觸發(fā)翻轉(zhuǎn)動畫效果。同時，我們還定義了一個名為flip的動畫，在動畫中，我們將頁面從0度翻轉(zhuǎn)到180度。

到此為止，我們已經(jīng)成功實現(xiàn)了CSS翻頁動畫效果。讀者們可以自行通過修改樣式和動畫效果，來達到不同的呈現(xiàn)效果。