css 3アンカーなしのページジャンプ効果を実現
実例点ここ
htmlコード
cssコード私のcssresetコードはここをクリックします
htmlコード
css3
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%);
}