欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

【CSS3】纯CSS3制作页面切换效果

程序员文章站 2022-04-09 17:00:17
此前写的那个太复杂了，来点简单的核心 ......

 

 

此前写的那个太复杂了，来点简单的核心

 

【CSS3】纯CSS3制作页面切换效果

 

<html>
<head>
    <title></title>
    <style type="text/css">

        * { margin: 0; padding: 0; border: none; } 

        .bl {
            width: 600px; 
            height: 540px; 
            margin: 0 auto;
            position: relative;
            top: 50%;
            transform: translatey(-50%);
        }

        .bl > input {
            width: 20%;
            height: 40px;
            position: absolute;
            cursor: pointer;
            opacity: 0;
        }

        .bl input:nth-of-type(1){ left: 0%; }
        .bl input:nth-of-type(2){ left: 20%; }
        .bl input:nth-of-type(3){ left: 40%; }
        .bl input:nth-of-type(4){ left: 60%; }
        .bl input:nth-of-type(5){ left: 80%; }

        /*切换效果*/

        .bl input:nth-of-type(1):checked ~ span:nth-of-type(1) { color: white; }  /* ~ 选择兄弟元素 */
        .bl input:nth-of-type(2):checked ~ span:nth-of-type(2) { color: white; }
        .bl input:nth-of-type(3):checked ~ span:nth-of-type(3) { color: white; }
        .bl input:nth-of-type(4):checked ~ span:nth-of-type(4) { color: white; }
        .bl input:nth-of-type(5):checked ~ span:nth-of-type(5) { color: white; }

        .bl input:nth-of-type(1):checked ~ .pagebox > .pages {  }   
        .bl input:nth-of-type(2):checked ~ .pagebox > .pages { transform: translatey(-100%); }
        .bl input:nth-of-type(3):checked ~ .pagebox > .pages { transform: translatey(-200%); }
        .bl input:nth-of-type(4):checked ~ .pagebox > .pages { transform: translatey(-300%); }
        .bl input:nth-of-type(5):checked ~ .pagebox > .pages { transform: translatey(-400%); }

        span { 
            display: block;
            width: 20%;
            height: 40px; 
            background-color: red;
            float: left;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
        }

        .pagebox,.pages {
            width: 100%; 
            height: 500px;
        }

        .pagebox {
            overflow: hidden;
        }

        .pages {
            transition: all 0.5s;
        }

        .page {
            width: 100%;
            height: 100%;
            text-align: center;
            font-family: "微软雅黑";
            font-size: 30px;
            line-height: 500px;
            color: white;
        }

        .page1 { background-color: pink; }
        .page2 { background-color: blue; }
        .page3 { background-color: red; }
        .page4 { background-color: green; }
        .page5 { background-color: black; }

    </style>
</head>
<body>
    <div class="bl">
        <input type="radio" name="btn" checked ><span>1</span>
        <input type="radio" name="btn"  ><span>2</span>
        <input type="radio" name="btn"  ><span>3</span>
        <input type="radio" name="btn"  ><span>4</span>
        <input type="radio" name="btn"  ><span>5</span>
        <section class="pagebox">
            <div class="pages">
                <div class="page page1">this is page1</div>
                <div class="page page2">this is page2</div>
                <div class="page page3">this is page3</div>
                <div class="page page4">this is page4</div>
                <div class="page page5">this is page5</div>
            </div>
        </section>
    </div>

</body>
</html>

 

上一篇： Android如何通过命令行操作Sqlite3数据库的方法

下一篇： Android实现卫星菜单效果

推荐阅读