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

来源：互联网发布：苹果手机怎么清楚数据编辑：程序博客网时间：2024/06/04 14:11

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

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

在线演示本地下载

在过去的几年中，但页面的网站设计越来越多了，大多数都是使用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 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;}

为了变化目前导航项目的颜色，我们使用:target伪类及其sibling选择器来处理分开的导航元素：

#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;}

以上就是全部代码。大家具体可以查看在线演示。希望大家喜欢这个效果，给我们留言！