在過去的幾年中,但頁面的網站設計越來越多了,大多數都是使用javascript來實現過渡效果。那麼今天我們講介紹使用CSS的transition和:target屬性來實現同樣的過渡效果。
在線演示地址:http://www.muu.cc/css3/CSS3PageTransitions
代碼下載地址:
免費下載地址在 http://linux.linuxidc.com/
用戶名與密碼都是www.linuxidc.com
具體下載目錄在 /2012年資料/2月/29日/CSS3實現的超酷頁面過渡效果/
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來添加頁面間的過渡效果,在這個例子中,我們將會幻燈上下我們的頁面部分