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

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

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

在线演示地址：http://www.muu.cc/css3/CSS3PageTransitions

代码下载地址：

免费下载地址在 http://linux.bkjia.com/

用户名与密码都是www.bkjia.com

具体下载目录在 /2012年资料/2月/29日/CSS3实现的超酷页面过渡效果/

HTML标签

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

1. <!-- Home -->  
2. <div id="home" class="content">  
3.     <h2>Home</h2>  
4.     <p>Some content</p>  
5.     <!-- ... -->  
6. </div>  
7. <!-- /Home -->  
8.    
9. <!-- Portfolio -->  
10. <div id="portfolio" class="panel">  
11.     <div class="content">  
12.         <h2>Portfolio</h2>  
13.         <p>Some content</p>  
14.         <!-- ... -->  
15.     </div>  
16. </div>  
17. <!-- /Portfolio -->  
18.    
19. <!-- About -->  
20. <div id="about" class="panel">  
21.     <div class="content">  
22.         <h2>About</h2>  
23.         <p>Some content</p>  
24.         <!-- ... -->  
25.     </div>  
26. </div>  
27. <!-- /About -->  
28.    
29. <!-- Contact -->  
30. <div id="contact" class="panel">  
31.     <div class="content">  
32.         <h2>Contact</h2>  
33.         <p>Some content</p>  
34.         <!-- ... -->  
35.     </div>  
36. </div>  
37. <!-- /Contact -->   
    

1. <!-- Header with Navigation -->  
2. <div id="header">  
3.     <h1>Page Transitions with CSS3</h1>  
4.     <ul id="navigation">  
5.         <li><a id="link-home" href="#home">Home</a></li>  
6.         <li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>  
7.         <li><a id="link-about" href="#about">About Me</a></li>  
8.         <li><a id="link-contact" href="#contact">Contact</a></li>  
9.     </ul>  
10. </div>  

如此无规律添加header到末尾的原因在于我们想让导航可以被siblings选择器所控制，这样我们可以分别的对他们处理颜色。

主要的想法就是使用伪class:target来添加页面间的过渡效果，在这个例子中，我们将会幻灯上下我们的页面部分