使用css3中transition的页面切换

前言：      这里所讲的方法均来自：http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/

               demo查看： http://tympanus.net/Tutorials/CSS3PageTransitions/index.html#home

               这个网站是一个很好的教程网，里面主要使用CSS3和JQuery，比较简单易懂，但是做出来的作品却是清新和有趣。

主题：      转回主题这次我学到的是使用CSS3的transition做页面切换，这里主要使用到的技术有两个：

               1.transition

               2.：target(这是个伪类)

效果图：   

简单描述：以主页的页面左为底部，每当点击左边的菜单栏，对应的页面就从上到下降落下来。

观察html代码是：

                <!-- Home -->
		<div id="home" class="content">
			<h2>Home</h2>
			<p>Some content</p>
		</div>
		<!-- portfolio -->
		<div id="portfolio" class="panel">
			<div class="content">
				<h2>Portfolio</h2>
				<p>Some content  ssss</p>
			</div>
		</div>
		<!-- About -->
		<div id="about" class="panel">
			<div class="content">
				<h2>About</h2>
				<p>Some content  aaaa</p>
			</div>
		</div>
		<!-- Contact -->
		<div id="contact" class="panel">
			<div class="content">
				<h2>Contact</h2>
				<p>Some content cccc</p>
			</div>
		</div>
		
		<div id="header">
			<h1>Page Transitions with CSS3</h1>
			<ul id="navigation">
				<li><a id="link-home" href="#home">Home</li>
				<li><a id="link-portfolio" href="#portfolio">Portfolio</li>
				<li><a id="link-about" href="#about">About</li>
				<li><a id="link-contact" href="#contact">Contact</li>
			</ul>
		</div>

 简单解释：    由于Home这个页面作为底部，不用具有动画效果，所以比其他少了一层Div，换句话来说类panel具有transition属性。至于为什么菜单栏放在最底     下呢，是为了在后面使用兄弟选择器~。

接着是CSS：

 

#header{
	position:absolute;
	z-index:2000;
	width:235px;
	top:50px;
}
#header h1{
	font-size:30px;
	font-weight:400;
	text-transform:uppercase;
	color:rgba(255,255,255,.9);
	text-shadow:0 1px 1px rgba(0,0,0,.3);
	padding:20px;
	background:#000;
}
#navigation{
	margin-top:20px;
	width:235px;
	display:block;
	list-style:none;
	z-index:3;
}
#navigation a{
	color:#444;
	display:block;
	background:#fff;
	background:rgba(255,255,255,.9);
	line-height:50px;
	padding:0 20px;
	text-transform:uppercase;
	margin-bottom:6px;
	box-shadow:1px 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2);
	-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2);
	-ms-box-shadow:1px 1px 2px rgba(0,0,0,.2);
	-o-box-shadow:1px 1px 2px rgba(0,0,0,.2);
}
#navigation a:hover{
	background:#ddd;
}

 这个是菜单栏的定位。

.content{
	right:40px;
	left:280px;
	top:0;
	position:absolute;
	padding-bottom:30px;
}
.content h2{
	font-size:110px;
	padding:10px 0 20px 0;
	margin-top:52px;
	color:#fff;
	color:rgba(255,255,255,.9);
	text-shadow:0 1px 1px rgba(0,0,0,.3);
}
.content p{
	font-size:18px;
	padding:10px;
	line-height:24px;
	color:#fff;
	display:inline-block;
	background:black;
	padding:10px;
	margin:3px 0;
}

 这个是页面内容的定位。

.panel{
	min-width:100%;
	height:98%;
	overflow-y:auto;
	overflow-x:hidden;
	margin-top:-150%;
	position:absolute;
	background:#000;
	box-shadow:0 4px 7px rgba(0,0,0,.6);
	-moz-box-shadow:0 4px 7px rgba(0,0,0,.6);
	-webkit-box-shadow:0 4px 7px rgba(0,0,0,.6);
	-ms-box-shadow:0 4px 7px rgba(0,0,0,.6);
	-o-box-shadow:0 4px 7px rgba(0,0,0,.6);
	z-index:2;
	-webkit-transition:all .8s ease-in-out;
	-moz-transition:all .8s ease-in-out;
	-o-transition:all .8s ease-in-out;
	-ms-transition:all .8s ease-in-out;
	transition:all .8s ease-in-out;
}
.panel:target{
	margin-top:0%;
	background:#ffcb00;
}

#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact{
	background:#000;
	color:#fff;
}

 这个就是实现页面切换的重要部分了，使用了:target这个伪类，它作用是匹配相关URL指向的元素，当我点击菜单栏的About时，该菜单的a元素的href="#about", 所以此时id为about的元素被匹配到。

最后：这个只是按照教程的意思我自己做的简单理解，其实还可以有千变万化的样子的，这个就要靠自己小小的脑袋了，有空发挥自己的脑子创新一下。(*^__^*)