css3超酷tab选项卡式页面切换特效

这是一款效果不错的Tab选项卡式css3全屏页面切换特效。该特效使用CSS Transitions和:target伪类完成。

HTML

html结构包括5个主要的div：一个头部header和4个内容面板。第一个内容面板只有一个ID和class content。其它内容面板都有一个ID和一个class panel。在它们里面又包含一个class为content的div。

<!-- 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部分将被由于放置tab选项卡导航按钮。

<!-- 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放置到html结构的底部的原因是我们使用兄弟选择器(~)来控制导航按钮，这样我们就可以给按钮不同的颜色。

css代码请参考下载文件。