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

当前位置:主页 > CSS3库 > CSS3动画 > css3超酷tab选项卡式页面切换特效
css3超酷tab选项卡式页面切换特效
分享:

    插件介绍

    这是一款使用纯css3制作的类似tab选项卡的全屏页面切换特效插件。该tab选项卡的选项以侧边栏的形式排列,点击每个选项就会以动画的显示进行全屏页面切换。

    浏览器兼容性

    浏览器兼容性
    时间:2014-11-29
    阅读:

简要教程

这是一款效果不错的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代码请参考下载文件。