CSS3兑现的超酷页面过渡效果

CSS3实现的超酷页面过渡效果

日期：2012/02/25? 来源：GBin1.com

?

在过去的几年中，但页面的网站设计越来越多了，大多数都是使用javascript来实现过渡效果。那么今天我们讲介绍使用CSS的transition和:target属性来实现同样的过渡效果。

HTML标签

HTML标签包含了5个主要的部分：一个header及其4个内容区域。每一个区域都拥有一个id和class panel.而且我们会添加另外一个用来获得class为content的部分。

<!-- Home --><div id="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实现的超酷页面过渡效果