全屏问题已解决
来源：2-2 导航页面切换（2）
司想君
2015-04-20 16:55
body{
font-family: georgia,serif;
background: #ddd;
font-weight: 400;
font-size: 15px;
color: #333;
overflow: hidden;
-webkit-font-smoothing: antialiased;/*常用于英文字体*/
}
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;
left: 0;
top: 0;
font-family: "Josefin Slab","Myriad Pro",arial,sans-serif;
}
.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%;
position: relative;
height: 100%;
left: 0%;
top: 0%;
}
.st-scroll{
left: 0;
top:0;
-webkit-transform: translate3d(0,0,0);/*在移动端建议用3D变换，因为它可以开启手机硬件加速*/
-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;
}
.st-panel{
background: #fff;
overflow: hidden;
}
#st-control-1:checked ~ .st-scroll{
transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll{
transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll{
transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll{
transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll{
transform: translateY(-400%);
}
写回答
关注
6回答
-
- 新飞梦
- 2015-05-14 09:39:38
但是如果按照“@ 阿森纳的会计师”所言，那么字体就会获得st-container的字体，“@笨小孩的梦想”的方法也可以解决
-
- 司想君
- 2015-04-23 08:36:28
HTML也附上吧
-
- 司想君
- 2015-04-23 08:36:07
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1"/><!--告诉IE使用最新的渲染模式--> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700"/> <link rel="stylesheet" type="text/css" href="css/normalize.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"/> <title>CSS3实现的页面平滑过渡</title> </head> <body> <div class="container"> <div class="st-container"> <input type="radio" name="radio-set" id="st-control-1" checked="checked" /> <a href="#st-panel-1">Serendipity</a> <input type="radio" name="radio-set" id="st-control-2" /> <a href="#st-panel-2">Happiness</a> <input type="radio" name="radio-set" id="st-control-3" /> <a href="#st-panel-3">Tranquillity</a> <input type="radio" name="radio-set" id="st-control-4" /> <a href="#st-panel-4">Positivity</a> <input type="radio" name="radio-set" id="st-control-5" /> <a href="#st-panel-5">Passion</a> <div class="st-scroll"> <section class="st-panel" id="st-panel-1"> <div class="st-desc" data-icon = "H"></div> <h2>Serendipity</h2> <p>SerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipityS</p> </section> <section class="st-panel st-color" id="st-panel-2"> <div class="st-desc" data-icon = "2"></div> <h2>Happiness</h2> <p>SerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipityS</p> </section> <section class="st-panel" id="st-panel-3"> <div class="st-desc" data-icon = "B"></div> <h2>Tranquillity</h2> <p>SerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipityS</p> </section> <section class="st-panel st-color" id="st-panel-4"> <div class="st-desc" data-icon = "X"></div> <h2>Positivity</h2> <p>SerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipityS</p> </section> <section class="st-panel" id="st-panel-5"> <div class="st-desc" data-icon = "C"></div> <h2>Passion</h2> <p>SerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipitySerendipityS</p> </section> </div> </div> </div> </body> </html>
-
- ffg_疯疯过
- 2015-04-22 17:17:16
这个不行
-
- 迷茫的小点点
- 2015-04-22 13:05:42
试了不行
-
- 迷茫的小点点
- 2015-04-22 13:02:02
那里有改动？？？
css3实现网页平滑过渡效果
CSS3 打造页面之间的平滑过渡效果，带来神奇的体验
54371 学习 · 372 问题
相似问题