Tab选项卡

纯CSS3超酷tab选项卡效果

阿里云


这是一款使用纯 css3 制作的 tab 选项卡效果插件。该 tab 选项卡在切换选项的时候 tab 中的内容由大变小,在弹性的由小变大,效果非常酷。这款 css3tab 选项卡插件外观精美,效果炫酷,值得推荐。

HTML 结构

  1. <section>
  2.   <input type="radio" id="profile" value="1" name="tractor" checked='checked' />    
  3.   <input type="radio" id="settings" value="2" name="tractor" />      
  4.   <input type="radio" id="posts" value="3" name="tractor" />
  5.   <input type="radio" id="books" value="4" name="tractor" />
  6.  
  7.   <nav>   
  8.   <label for="profile" class='fontawesome-camera-retro'></label>
  9.   <label for="settings" class='fontawesome-film'></label>
  10.   <label for="posts" class='fontawesome-calendar'></label>
  11.   <label for="books" class='fontawesome-list-alt'></label>
  12.   </nav>
  13.  
  14.   <article class='uno'>
  15.     <h2>
  16.       <img alt=''  src='head-photo.jpg' />
  17.       Delmarks
  18.       <span>Delmarks Css blog</span></h2>
  19.    <footer>
  20.     <ul>
  21.       <li class='fontawesome-link'></li>
  22.       <li class='fontawesome-paper-clip'></li>
  23.       <li class='fontawesome-sitemap'></li>
  24.       <li class='fontawesome-wrench'></li>
  25.       <li class='fontawesome-magic'></li>
  26.     </ul>
  27.    </footer>
  28.   </article>
  29.  
  30.   <article class='dos fontawesome-wrench'>
  31.     <p>......</p>
  32.   </article>
  33.   <article class='tres fontawesome-file-alt'>
  34.     <ol>
  35.       <li>......</li>
  36.       ......
  37.     </ol>
  38.   </article>
  39.  
  40.   <article class='cuatro fontawesome-copy'>
  41.     <dl>
  42.       <dt>......</dt>
  43.       <dd>......</dd>
  44.       <dt>......</dt>
  45.       <dd>......</dd>
  46.     </dl>
  47.   </article>
  48. </section>
也想出现在这里?联系我们
创客主机

纯 CSS3 超酷 tab 选项卡效果

已有 852 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(2)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!