隨著HTML5技術的不斷發(fā)展，動態(tài)翻頁效果越來越受到開發(fā)者的關注。尤其是在移動設備上，動態(tài)翻頁效果能夠提升用戶的體驗，讓頁面更加生動、有趣。
<!DOCTYPE html>
<html>
<head>
<title>動態(tài)翻頁效果</title>
<style>
.container {
width: 300px;
height: 400px;
position: relative;
perspective: 1000px;
}
.page {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
transition: transform 1s;
}
.page:nth-child(1) {
transform: rotateY(0deg);
}
.page:nth-child(2) {
transform: rotateY(-180deg);
}
.page.flip {
transform: rotateY(-180deg);
}
</style>
</head>
<body>
<div class="container">
<div class="page">
<h1>第一頁</h1>
<p>這是第一頁的內(nèi)容。</p>
</div>
<div class="page">
<h1>第二頁</h1>
<p>這是第二頁的內(nèi)容。</p>
</div>
</div>
<script>
var container = document.querySelector('.container');
var pages = document.querySelectorAll('.page');
var currentPageIndex = 0;
var isFlipping = false;
function flip() {
if (isFlipping) return;
isFlipping = true;
pages[currentPageIndex].classList.add('flip');
currentPageIndex = (currentPageIndex + 1) % pages.length;
pages[currentPageIndex].classList.add('flip');
setTimeout(function() {
pages[currentPageIndex].classList.remove('flip');
pages[(currentPageIndex + 1) % pages.length].classList.remove('flip');
isFlipping = false;
}, 1000);
}
container.addEventListener('click', flip);
</script>
</body>
</html>上面的代碼實現(xiàn)了一個簡單的動態(tài)翻頁效果，整個頁面由一個容器和兩個頁面組成。容器設置了透視效果，讓頁面可以斜著翻轉(zhuǎn)。每一個頁面都有自己的位置和角度，當頁面翻轉(zhuǎn)時，通過改變每個頁面的角度來實現(xiàn)翻轉(zhuǎn)效果。
點擊容器時，頁面就會翻轉(zhuǎn)。通過控制頁面的類來實現(xiàn)頁面翻轉(zhuǎn)的動畫效果。當一個頁面被翻轉(zhuǎn)時，它會先加上一個flip類，等到翻轉(zhuǎn)動畫結(jié)束后再把這個類移除。
這只是一個簡單的示例，HTML5技術可以做出更加復雜、炫酷的動態(tài)翻頁效果。但無論如何，動態(tài)翻頁效果都是一個很有趣的特效，可以為頁面增加很多樂趣。