css3 实现非锚点的页面跳转效果

来源：互联网发布：安德迈知乎编辑：程序博客网时间：2024/05/11 16:34

演示案例点这里

html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta name="author" content="李祺丰,www.qifeng.site,mail:767521025@qq.com">    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">    <title>css3非锚点跳转案例</title>    <link rel="stylesheet" href="./reset.css">    <link rel="stylesheet" href="./index.css"></head><body>    <div class="container">        <input class="tabCon" type="radio" name="tab" checked id="tab1">        <a class="tabCon" href="#tab1">a</a>        <input class="tabCon" type="radio" name="tab" id="tab2">        <a class="tabCon" href="#tab2">b</a>        <input class="tabCon" type="radio" name="tab" id="tab3">        <a class="tabCon" href="#tab3">c</a>        <input class="tabCon" type="radio" name="tab" id="tab4">        <a class="tabCon" href="#tab4">d</a>        <section class="floor f1">            <h1 class="text-center">这是第一屏</h1>        </section>        <section class="floor f2"><h1>这是第二屏</h1></section>        <section class="floor f3">这是第三屏</section>        <section class="floor f4">这是第四屏</section>    </div></body></html>

css代码我的cssreset代码点击这里

.container{    width:100%;    height: 100%;    position: absolute;    left: 0;    top:0;    background:#adf;    overflow: hidden;}.tabCon{    width:25%;    display: block;    height: 40px;    position: absolute;    bottom:0;    left:0;    z-index: 2;    line-height: 40px;    text-align: center;    background:deepskyblue;}#tab2 ,#tab2 +a{    left: 25%;}#tab3 ,#tab3 +a{    left: 50%;}#tab4 ,#tab4 +a{    left: 75%;}input.tabCon {    z-index: 5;    opacity:0;    border:none;    cursor: pointer;}input.tabCon:checked+a{    background:#eee;}input.tabCon:checked+a:after{    display: block;    width:0;    height: 0;    content:'';    bottom:100%;    border:20px solid transparent;    position: absolute;    left:50%;    margin-left:-20px;    border-bottom-color:#eee;}/* section */.container section{    height:100%;    position: relative;}.container section{    transition:all .5s .1s;    -ms-transform:translate3d(0,0,0);    transform:translate3d(0,0,0);}.f1{    background: #ddd;}.f2{    background: purple;}.f3{    background: darkcyan;}.f4{    background: yellowgreen;}#tab1:checked ~ .floor{    -ms-transform:translateY(0);    transform:translateY(0);}#tab2:checked ~ .floor{    -ms-transform:translateY(-100%);    transform:translateY(-100%);}#tab3:checked ~ .floor{    -ms-transform:translateY(-200%);    transform:translateY(-200%);}#tab4:checked ~ .floor{    -ms-transform:translateY(-300%);    transform:translateY(-300%);}

阅读全文

0 0