使用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的元素被匹配到。

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