css样式:
html,body,.container,.st-container{height:100%;}
a{ text-decoration:none;
color:#555;
}
.clr{ width:0;
height:0;
overflow:hidden;
clear:both;
padding:0;
margin:0;
}
.st-container{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
left:0;
top:0;
}
.st-container > input,
.st-container > a{
width:20%;
height:34px;
line-height:34px;
position:fixed;
bottom:0;
cursor: pointer;
}
.st-container > input{
opacity:0;
z-index:1000;
}
.st-container > a{
z-index:10;
font-weight:700;
font-size:16px;
background:#e23a6e;
text-align:center;
color:#fff;
text-shadow:1px 1px 1px rgba(151,24,64,0.2);
}
#st-control-1,#st-control-1 + a{
left:0%;
}
#st-control-2,#st-control-2 + a{
left:20%;
}
#st-control-3,#st-control-3 + a{
left:40%;
}
#st-control-4,#st-control-4 + a{
left:60%;
}
#st-control-5,#st-control-5 + a{
left:80%
}
.st-container input:checked + a,
.st-container input:checked:hover + a{
background:#821134;
}
.st-container input:checked + a:after{
content:"";
width:0;
height:0;
overflow:hidden;
border:20px solid transparent;
border-bottom-color:#821134;
position:absolute;
bottom:100%;
left:50%;
margin-left:-20px;
}
.st-container input:hover + a{
background:#AD244F;
}
.st-scroll,
.st-panel{
width:100%;
height:100%;
position:relative;
color:red;background:#333;
left:0%;top:0%;
}
结构:
Serendipity
Banksy adipisicing eiusujj mi sed Squid stmpt fffdf sdsdgf ffee eregg
Serendipity
Banksy adipisicing eiusujj mi sed Squid stmpt fffdf sdsdgf ffee eregg
Serendipity
Banksy adipisicing eiusujj mi sed Squid stmpt fffdf sdsdgf ffee eregg
Serendipity
Banksy adipisicing eiusujj mi sed Squid stmpt fffdf sdsdgf ffee eregg
Serendipity
Banksy adipisicing eiusujj mi sed Squid stmpt fffdf sdsdgf ffee eregg