日期：2012/02/25? 来源：GBin1.com
?
在线演示 ? 本地下载.
在过去的几年中，但页面的网站设计越来越多了，大多数都是使用javascript来实现过渡效果。那么今天我们讲介绍使用CSS的transition和:target属性来实现同样的过渡效果。
HTML标签
HTML标签包含了5个主要的部分：一个header及其4个内容区域。每一个区域都拥有一个id和class panel.而且我们会添加另外一个用来获得class为content的部分。
<!-- Home --> <div id="home" class="content"> ??? <h2>Home</h2> ??? <p>Some content</p> ??? <!-- ... --> </div> <!-- /Home --> ? <!-- Portfolio --> <div id="portfolio" class="panel"> ??? <div class="content"> ??????? <h2>Portfolio</h2> ??????? <p>Some content</p> ??????? <!-- ... --> ??? </div> </div> <!-- /Portfolio --> ? <!-- About --> <div id="about" class="panel"> ??? <div class="content"> ??????? <h2>About</h2> ??????? <p>Some content</p> ??????? <!-- ... --> ??? </div> </div> <!-- /About --> ? <!-- Contact --> <div id="contact" class="panel"> ??? <div class="content"> ??????? <h2>Contact</h2> ??????? <p>Some content</p> ??????? <!-- ... --> ??? </div> </div> <!-- /Contact -->
在header中我们将添加主要的导航和标题：
<!-- Header with Navigation --> <div id="header"> ??? <h1>Page Transitions with CSS3</h1> ??? <ul id="navigation"> ??????? <li><a id="link-home" href="#home">Home</a></li> ??????? <li><a id="link-portfolio" href="#portfolio">Portfolio</a></li> ??????? <li><a id="link-about" href="#about">About Me</a></li> ??????? <li><a id="link-contact" href="#contact">Contact</a></li> ??? </ul> </div>
如此无规律添加header到末尾的原因在于我们想让导航可以被siblings选择器所控制，这样我们可以分别的对他们处理颜色。
主要的想法就是使用伪class:target来添加页面间的过渡效果，在这个例子中，我们将会幻灯上下我们的页面部分
CSS
首先我们将设计header和导航的样式。我们希望所有这些都在同一个位置，即使其它部分都会移动
#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,0.9);
??? text-shadow: 0px 1px 1px rgba(0,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,0.9);
??? line-height: 50px;
??? padding: 0px 20px;
??? text-transform: uppercase;
??? margin-bottom: 6px;
??? box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
??? font-size: 14px;
}
#navigation a:hover {
??? background: #ddd;
}
除了#home的所有的部分都拥有panel class。这里我们将在任何时候元素取得“target”的时候使用过渡效果。主要技巧是在一般class中使用一个负的margin，而在:target中不使用margin
.panel{
??? min-width: 100%;
??? height: 98%;
??? overflow-y: auto;
??? overflow-x: hidden;
??? margin-top: -150%;
??? position: absolute;
??? background: #000;
??? box-shadow: 0px 4px 7px rgba(0,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;
??? transition: all .8s ease-in-out;
}
.panel:target{
??? margin-top: 0%;
??? background-color: #ffcb00;
}
接下来我们设计content class：
.content{
??? right: 40px;
??? left: 280px;
??? top: 0px;
??? position: absolute;
??? padding-bottom: 30px;
}
.content h2{
??? font-size: 110px;
??? padding: 10px 0px 20px 0px;
??? margin-top: 52px;
??? color: #fff;
??? color: rgba(255,255,255,0.9);
??? text-shadow: 0px 1px 1px rgba(0,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 0px;
}
?
希望大家喜欢这个效果，给我们留言！
?
via tympanus
?
来源： CSS3实现的超酷页面过渡效果