css实现页面切换效果

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            overflow: hidden;
        }
        ul{
            list-style: none;
        }
        @-webkit-keyframes show {
            0%{
                opacity: 1;
                transform:translateX(100%);
            }
            100%{
                opacity: 1;
                transform:translateX(0%);
            }
        }
        div{
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            height: 100vh;
            padding-left: 10px;
            position: absolute;
            left: 0;
            top:0;
            opacity:0;
        }
        p{
            font-size: 40px;
            text-align: center;
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke-color: red;
            -webkit-text-stroke-width: 2px;
        }
        div:nth-of-type(1){
            background-color: rgba(255,255,200,1);
            z-index: 1;
        }

        div:nth-of-type(2){
            background-color: rgba(255,0,255,1);
        }
        div:nth-of-type(3){
            background-color: rgba(255,255,0,1);
        }
        div:nth-of-type(4){
            background-color: rgba(0,255,255,1);;
        }
        div:nth-of-type(5){
            background-color: rgba(255,200,255,1);
        }
        :target{
            z-index: 2;
            animation: show .3s ease-in .1s 1 forwards;
        }
    </style>
</head>
<body>
<div id="menu">
    <p>menu</p>
    <ul>
        <li><a href="#test1">test1</a></li>
        <li><a href="#test2">test2</a></li>
        <li><a href="#test3">test3</a></li>
        <li><a href="#test4">test4</a></li>
    </ul>
</div>
<div id="test1">
    <p>test1</p>
    <ul>
        <li><a href="#test2">next</a></li>
        <li><a href="#menu">menu</a></li>
    </ul>
</div>
<div id="test2">
    <p>test2</p>
    <ul>
        <li><a href="#test1">pre</a></li>
        <li><a href="#test3">next</a></li>
        <li><a href="#menu">menu</a></li>
    </ul>
</div>
<div id="test3">
    <p>test3</p>
    <ul>
        <li><a href="#test2">pre</a></li>
        <li><a href="#test4">next</a></li>
        <li><a href="#menu">menu</a></li>
    </ul>
</div>
<div id="test4">
    <p>test4</p>
    <ul>
        <li><a href="#test3">pre</a></li>
        <li><a href="#menu">menu</a></li>
    </ul>
</div>
<script>
    location.hash='menu';
</script>
</body>
</html>
css实现页面切换效果

猜你喜欢
