全屏问题已解决

源自：2-2 导航页面切换（2）

全屏问题已解决

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%);
}

提问者：司想君 2015-04-20 16:55

个回答

新飞梦

2015-05-14 09:39:38

但是如果按照“@ 阿森纳的会计师”所言，那么字体就会获得st-container的字体，“@笨小孩的梦想”的方法也可以解决

0
司想君

2015-04-23 08:36:28

HTML也附上吧

0

司想君: 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

这个不行

0
迷茫的小点点

2015-04-22 13:05:42

试了不行

0
迷茫的小点点

2015-04-22 13:02:02

那里有改动？？？

0