[分享]css全屏翻页效果怎么做

CSS全屏翻页效果是一种常见的网页动画效果，它可以增强用户体验，提升网站的视觉效果。本文将介绍如何使用CSS制作全屏翻页效果。/ HTML结构 / 第一页 第二页 第三页 / CSS样式 / .c...

CSS全屏翻页效果是一种常见的网页动画效果，它可以增强用户体验，提升网站的视觉效果。本文将介绍如何使用CSS制作全屏翻页效果。

/* HTML结构 */ 
    <div class="container"> 
        <div class="page">第一页</div> 
        <div class="page">第二页</div> 
        <div class="page">第三页</div> 
    </div> 

/* CSS样式 */ 
    .container { 
        width: 100%; 
        height: 100%; 
        position: relative; 
    } 

    .page { 
        width: 100%; 
        height: 100%; 
        position: absolute; 
        z-index: -1; 
        transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); 
    }

    .page.active { 
        z-index: 1; 
        transform: translateY(0); 
    } 

/* JavaScript脚本 */ 
    var curPage = 0; 
    var pages = document.querySelectorAll('.page'); 
    for (var i = 0; i < pages.length; i++) { 
        pages[i].classList.remove('active'); 
    } 
    pages[curPage].classList.add('active'); 

    document.addEventListener('keydown', function (e) { 
        if (e.keyCode === 38) { // 上
            curPage--; 
            if (curPage < 0) curPage = pages.length - 1; 
        } else if (e.keyCode === 40) { // 下
            curPage++; 
            if (curPage >= pages.length) curPage = 0; 
        } 
        for (var i = 0; i < pages.length; i++) { 
            if (i === curPage) { 
                pages[i].classList.add('active'); 
            } else { 
                pages[i].classList.remove('active'); 
            } 
        } 
    }); 

以上是一份简单的全屏翻页效果的代码，我们可以根据自己的需求和喜好对其进行改进和调整。希望本文能为大家提供一些思路和帮助。