最近,html5代碼翻頁效果受到了越來越多的關(guān)注。這種翻頁效果可以讓網(wǎng)頁內(nèi)容更加生動、有趣,吸引用戶的閱讀興趣。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 翻頁效果</title> <style> .container { width: 300px; height: 300px; overflow: hidden; position: relative; } .page { width: 300px; height: 300px; position: absolute; top: 0; left: 0; transform-style: preserve-3d; transition: all 1s ease-in-out; } .page.backface { transform: rotateY(-180deg); } .page:nth-child(odd) { background-color: #eee; } .page:nth-child(even) { background-color: #fff; } .page h1 { text-align: center; } .page.one { transform: translateZ(0); } .page.two { transform: translateZ(-150px) rotateY(-180deg); } .page.three { transform: translateZ(-300px); } .page.four { transform: translateZ(-450px) rotateY(-180deg); } .page.five { transform: translateZ(-600px); } .page.six { transform: translateZ(-750px) rotateY(-180deg); } </style> </head> <body> <div class="container"> <div class="page one"> <h1>第一頁</h1> <p>這是第一頁的內(nèi)容。</p> </div> <div class="page two"> <h1>第二頁</h1> <p>這是第二頁的內(nèi)容。</p> </div> <div class="page three"> <h1>第三頁</h1> <p>這是第三頁的內(nèi)容。</p> </div> <div class="page four"> <h1>第四頁</h1> <p>這是第四頁的內(nèi)容。</p> </div> <div class="page five"> <h1>第五頁</h1> <p>這是第五頁的內(nèi)容。</p> </div> <div class="page six"> <h1>第六頁</h1> <p>這是第六頁的內(nèi)容。</p> </div> </div> <script> const pages = document.querySelectorAll('.page'); pages.forEach((page, index) => { page.addEventListener('click', () => { page.classList.add('backface'); setTimeout(() => { page.classList.remove('backface'); }, 1000); pages.forEach((p, i) => { if (i !== index) { p.style.display = 'none'; } }); if (index < pages.length - 1) { pages[index + 1].style.display = 'block'; } else { pages[0].style.display = 'block'; } }); }); </script> </body> </html>
上面的代碼實(shí)現(xiàn)了一個基于3D transform的翻頁效果。頁面內(nèi)容被分成了6頁,每一頁都有一個對應(yīng)的class,用于設(shè)置其在3D空間中的位置和旋轉(zhuǎn)角度。當(dāng)用戶點(diǎn)擊某一頁時,該頁會在水平方向上翻轉(zhuǎn),同時下一頁的內(nèi)容會自動顯示。
代碼中使用了一些CSS屬性,比如transform-style、transform、transition等,這些屬性雖然不是html5新標(biāo)準(zhǔn)中新增的,但在實(shí)現(xiàn)html5翻頁效果時十分重要,可以讓網(wǎng)頁內(nèi)容更加生動、有趣。如果你正在設(shè)計一個互動性較強(qiáng)的網(wǎng)頁,建議也試試這種翻頁效果。