演示案例点这里
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"><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>.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%);
}
本文发布于:2024-02-03 02:02:56，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170689697747909.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
