页面切换没有效果
来源：2-3 导航页面切换（3）
一只特立独行的doge
2016-10-22 00:47
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>一只特立独行的doge</title>
<style>
*{
margin: 0;
padding: 0;
text-decoration: none;
}
.wraper{
width: 100%;
height: 100%;
font-family: "微软雅黑";
overflow: hidden;
/*只有将整个wraper定位为绝对定位，才能让后面scroll-page撑满整个页面*/
position: absolute;
top: 0;
left: 0;
}
/*选择框样式*/
.scroll-page-control > input,
.scroll-page-control > a{
/*将input和a绝对定位在页面底部*/
position: fixed;
bottom: 0;
width: 25%;
height: 60px;
line-height: 60px;
text-align: center;
}
/*z-index的作用是让单选框始终覆盖在a标签只上*/
.scroll-page-control > input{
z-index: 1000;
opacity: 0;
cursor: pointer;
}
.scroll-page-control > a{
z-index: 10;
font-size: 35px;
color: rgba(255,255,255,0.8);
background-color: rgba(140,5,11,0.9);
text-shadow: 1px 1px 10px rgba(0,0,0,1);
}
.scroll-page-control #radio-1
.scroll-page-control #radio-1-1,{
left: 0;
}
.scroll-page-control #radio-2,
.scroll-page-control #radio-2-1{
left: 25%;
}
.scroll-page-control #radio-3,
.scroll-page-control #radio-3-1{
left: 50%;
}
.scroll-page-control #radio-4,
.scroll-page-control #radio-4-1{
left: 75%;
}
.scroll-page-control > input:checked + a{
background-color:rgba(247,161,84,0.9) ;
color: rgba(140,5,11,0.9);
text-shadow: 1px 1px 5px rgba(192,115,61,0.5);
}
.scroll-page-control > input:checked + a:after{
content: "";
width: 0;
height: 0;
position: absolute;
top: -60px;
left: 50%;
margin-left: -30px;
border: 30px solid transparent;
border-bottom-color:rgba(247,161,84,0.9);
}
/*page样式*/
.scroll,
.scroll-page{
width: 100%;
height: 100%;
position: relative;/*让每个页面充满整个窗口*/
}
.scroll{
position: relative;
top: 0;
left: 0;
-webkit-transform: translate3d( 0, 0, 0);
-moz-transform: translate3d( 0, 0, 0);
-o-transform: translate3d( 0, 0, 0);
-ms-transform: translate3d( 0, 0, 0);
transform: translate3d( 0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.scroll-page{
background-color: gray;
overflow: hidden;
}
#radio-1:checked ~ .scroll{
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
#radio-2:checked ~ .scroll{
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
#radio-3:checked ~ .scroll{
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
}
#radio-4:checked ~ .scroll{
-webkit-transform: translateY(-300%);
-moz-transform: translateY(-300%);
-o-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
}
</style>
</head>
<body>
<div class="wraper">
<div class="scroll-page-control">
<input type="radio" name="radio" id="radio-1" checked="checked" />
<a href="#scroll-page-1" id="radio-1-1">home-page</a>
<input type="radio" name="radio" id="radio-2" />
<a href="#scroll-page-2" id="radio-2-1">demo</a>
<input type="radio" name="radio" id="radio-3" />
<a href="#scroll-page-3" id="radio-3-1">life</a>
<input type="radio" name="radio" id="radio-4" />
<a href="#scroll-page-4" id="radio-4-1">contant-me</a>
</div>
<!--选单end-->
<div class="scroll">
<section class="scroll-page" id="scroll-page-1">
<h2>一只特立独行的doge-1</h2>
<p>你好，感谢你有时间来看这个demo</p>
</section>
<section class="scroll-page" id="scroll-page-2">
<h2>一只特立独行的doge-2</h2>
<p>你好，感谢你有时间来看这个demo</p>
</section>
<section class="scroll-page" id="scroll-page-3">
<h2>一只特立独行的doge-3</h2>
<p>你好，感谢你有时间来看这个demo</p>
</section>
<section class="scroll-page" id="scroll-page-4">
<h2>一只特立独行的doge-4</h2>
<p>你好，感谢你有时间来看这个demo</p>
</section>
</div>
<!--页面end-->
</div>
</body>
</html>贴上代码，那位大大看看是什么问题
写回答
关注
1回答
-
- 遍野姐儿
- 2016-10-24 13:25:07
首先你的<Input>标签必须与<section>的父元素在同一个等级，即你的</a>后的<div>必须放在后面</body>前。
css3实现网页平滑过渡效果
CSS3 打造页面之间的平滑过渡效果，带来神奇的体验
54364 学习 · 391 问题
相似问题