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%);
}