为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/CSS3

/css3实现网页平滑过渡效果

全屏问题已解决

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

源自：css3实现网页平滑过渡效果  2-2

关注问题 我要回答
2541
操作
收起

正在回答

6 回答

新飞梦
2015-05-14

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

0 回复 有任何疑惑可以回复我~
收起回答
司想君 提问者
2015-04-23

HTML也附上吧


0 回复 有任何疑惑可以回复我~
收起回答
#1

迷茫的小点点

我的出错原因是html里面的，不过改过来后面就理解不了了，为什么导航的结束要把下面的内容包括进去啊？？？？
2015-04-24 回复 有任何疑惑可以回复我~
#2

阿森纳的会计师 回复 迷茫的小点点

因为如果不包进去的话，.st-scroll的父级是.container，然而.container是没有高度的，这时候设置.st-scroll的height为100%是没有用的。 ps:百分数做长度单位是根据父元素来的，如果父元素的高度为0，那么子元素设置成相对于父元素100%不还是0么？？
2015-05-02 回复 有任何疑惑可以回复我~
#3

迷茫的小点点 回复 阿森纳的会计师

这样啊，懂了。谢谢
2015-05-03 回复 有任何疑惑可以回复我~
#4

笨小孩的梦想

你确定你是可以的？
2015-05-07 回复 有任何疑惑可以回复我~
查看1条回复
司想君 提问者
2015-04-23 
<!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>


0 回复 有任何疑惑可以回复我~
收起回答
#1

笨小孩的梦想

还是不行啊
2015-05-07 回复 有任何疑惑可以回复我~
ffg_疯疯过
2015-04-22

这个不行

0 回复 有任何疑惑可以回复我~
收起回答
迷茫的小点点
2015-04-22

试了不行http://img1.sycdn.imooc.com//55372c1e0001aad813660583.jpg

0 回复 有任何疑惑可以回复我~
收起回答
#1

笨小孩的梦想

解决了 html, body, .container,.st-container { width: 100%; height: 100%; }
2015-05-07 回复 有任何疑惑可以回复我~
#2

火星上的慕老爷 回复 笨小孩的梦想

这个好用，有效果
2015-08-25 回复 有任何疑惑可以回复我~
迷茫的小点点
2015-04-22

那里有改动？？？

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
css3实现网页平滑过渡效果
  • 参与学习       54371    人
  • 解答问题       372    个

CSS3 打造页面之间的平滑过渡效果，带来神奇的体验

进入课程

本课相似问答

2 回答还有谁 解决了全屏的问题？

5 回答不能全屏这个问题 ，看完了下面所有解决方法 一个一个试了怎么我是不能全屏呢

3 回答全屏的问题怎么破呀

2 回答关于100%的height不全屏的问题

2 回答不能全屏的问题有答案了吗？
搜索更多本课相关问答

全屏问题已解决

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信