                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /css3實現(xiàn)網(wǎng)頁平滑過渡效果

全屏問題已解決

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實現(xiàn)網(wǎng)頁平滑過渡效果 2-2

關(guān)注問題我要回答

2587

操作

收起

6 回答

新飛夢
2015-05-14

但是如果按照“@?阿森納的會計師”所言，那么字體就會獲得st-container的字體，“@笨小孩的夢想”的方法也可以解決

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

司想君提問者
2015-04-23

HTML也附上吧

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

迷茫的小點點

我的出錯原因是html里面的，不過改過來后面就理解不了了，為什么導(dǎo)航的結(jié)束要把下面的內(nèi)容包括進去啊？？？？

2015-04-24 回復(fù) 有任何疑惑可以回復(fù)我~

#2

阿森納的會計師回復(fù) 迷茫的小點點

因為如果不包進去的話，.st-scroll的父級是.container，然而.container是沒有高度的，這時候設(shè)置.st-scroll的height為100%是沒有用的。 ps:百分數(shù)做長度單位是根據(jù)父元素來的，如果父元素的高度為0，那么子元素設(shè)置成相對于父元素100%不還是0么？？

2015-05-02 回復(fù) 有任何疑惑可以回復(fù)我~

#3

迷茫的小點點回復(fù) 阿森納的會計師

這樣啊，懂了。謝謝

2015-05-03 回復(fù) 有任何疑惑可以回復(fù)我~

查看1條回復(fù)

司想君提問者
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"?/>
		<link?rel="stylesheet"?type="text/css"?href="css/normalize.css"/>
		<link?rel="stylesheet"?type="text/css"?href="css/style.css"/>
		<title>CSS3實現(xiàn)的頁面平滑過渡</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 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

笨小孩的夢想

還是不行啊

2015-05-07 回復(fù) 有任何疑惑可以回復(fù)我~