Javascript滑屏切换场景

来源：互联网发布：win10无法启用网络发现编辑：程序博客网时间：2024/05/12 22:33

滑屏切换的效果，关键是transform动画实现，动画运行后再hide隐藏实现，配合移动端一些滑动手势库可以简单实现一些幻灯片效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <div class="page page1 page_moveToTop">            <div class="wrap">            </div>        </div>        <div class="page page2 page_moveFromBottom">            <div class="wrap">            </div>        </div>    </body>    <style>        body,        div {            margin: 0;            padding: 0;        }                .page {            width: 100%;            height: 100%;            position: absolute;            font-size: 100px;            text-align: center;        }                .page1 {            background-color: #CCCCCC;            background-size: cover;        }                .page2 {            background-color: #FFFF66;            background-size: cover;        }                .wrap {}                .page_moveToTop {            -webkit-animation: moveToTop .6s ease both;            animation: moveToTop .6s ease both;        }                @keyframes moveToTop {            from {}            to {                -webkit-transform: translateY(-100%);                transform: translateY(-100%);            }        }                .page_moveFromBottom {            -webkit-animation: moveFromBottom .6s ease both;            animation: moveFromBottom .6s ease both;        }                @keyframes moveFromBottom {            from {                -webkit-transform: translateY(100%);                transform: translateY(100%);            }        }    </style></html>

1 0