Tab选项卡

纯css3超酷tabs选项卡动画特效插件

也想出现在这里?联系我们
创客云

纯css3超酷tabs选项卡动画特效插件-云模板
这是一款使用纯 css3 制作的超酷 tabs 选项卡动画特效插件。该 tabs 选项卡插件共有 5 种特效,分别是淡入淡出、弹性放大缩小、上下滑动、来回翻转等特效。自从 css3 被更多的浏览器所支持,以前许多用 javascript 才能完成的特效都被 css3 所替代。这款插件就是使用纯 css 制作出效果极酷的 tabs 选项特效。

HTML 结构

  1. <ul class="tabs">
  2.         <li>
  3.           <input type="radio" checked name="tabs" id="tab1">
  4.           <label for="tab1">tab 1</label>
  5.           <div id="tab-content1" class="tab-content animated fadeIn">
  6.   ...
  7.           </div>
  8.         </li>
  9.         <li>
  10.           <input type="radio" name="tabs" id="tab2">
  11.           <label for="tab2">tab 2</label>
  12.           <div id="tab-content2" class="tab-content animated fadeIn">
  13.             ...
  14.           </div>
  15.         </li>
  16.         <li>
  17.           <input type="radio" name="tabs" id="tab3">
  18.           <label for="tab3">tab 3</label>
  19.           <div id="tab-content3" class="tab-content animated fadeIn">
  20.             ...
  21.           </div>
  22.         </li>
  23. </ul>
也想出现在这里?联系我们
创客主机

CSS 样式

  1. body, html {
  2.     height: 100%;
  3.     margin: 0;
  4.     -webkit-font-smoothing: antialiased;
  5.     font-weight: 100;
  6.     background: #aadfeb;
  7.     text-align: center;
  8.     font-family: helvetica;
  9. }
  10.  
  11. .tabs input[type=radio] {
  12.     position: absolute;
  13.     top: -9999px;
  14.     left: -9999px;
  15. }
  16. .tabs {
  17.     width: 650px;
  18.     float: none;
  19.     list-style: none;
  20.     position: relative;
  21.     padding: 0;
  22.     margin: 75px auto;
  23. }
  24. .tabs li{
  25.     float: left;
  26. }
  27. .tabs label {
  28.     display: block;
  29.     padding: 10px 20px;
  30.     border-radius: 2px 2px 0 0;
  31.     color: #08C;
  32.     font-size: 24px;
  33.     font-weight: normal;
  34.     font-family: 'Lily Script One', helveti;
  35.     background: rgba(255,255,255,0.2);
  36.     cursor: pointer;
  37.     position: relative;
  38.     top: 3px;
  39.     -webkit-transition: all 0.2s ease-in-out;
  40.     -moz-transition: all 0.2s ease-in-out;
  41.     -o-transition: all 0.2s ease-in-out;
  42.     transition: all 0.2s ease-in-out;
  43. }
  44. .tabs label:hover {
  45.     background: rgba(255,255,255,0.5);
  46.     top: 0;
  47. }
  48.  
  49. [id^=tab]:checked + label {
  50.     background: #08C;
  51.     color: white;
  52.     top: 0;
  53. }
  54.  
  55. [id^=tab]:checked ~ [id^=tab-content] {
  56.     display: block;
  57. }
  58. .tab-content{
  59.     z-index: 2;
  60.     display: none;
  61.     text-align: left;
  62.     width: 100%;
  63.     font-size: 20px;
  64.     line-height: 140%;
  65.     padding-top: 10px;
  66.     background: #08C;
  67.     padding: 15px;
  68.     color: white;
  69.     position: absolute;
  70.     top: 53px;
  71.     left: 0;
  72.     box-sizing: border-box;
  73.     -webkit-animation-duration: 0.5s;
  74.     -o-animation-duration: 0.5s;
  75.     -moz-animation-duration: 0.5s;
  76.     animation-duration: 0.5s;
  77. }

首先,为了实现 javascript 的功能,我们需要让 CSS 知道以后什么时候点击了按钮。如果是使用 javascript,我们可以简单的在按钮上添加一个"click" 的 class 用以操控按钮。在不适用 javascript 的情况下,我们使用了一个小技巧,隐藏 radio 按钮,radio 按钮通过 rel 属性链接到 label 上。当你点击了 label 的时候,实际上是点击了 radio 按钮。通过 lable 来触发 radio 按钮的“checked”属性,我们可以通过:checked 来控制它们。通过上面的 html 结构,你可以看到我们将 radio 按钮、label 和选项卡内容放在 DOM 的同一层上。这样做的原因,是为了方便使用“~”兄弟选择器来触发同一级别上的元素。在 demo 中,我们在 tabs 选项卡内容切换时添加了 Dan Eden 的 CSS animation library 来添加各种动画效果。

下载地址

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

热销模板

Nastik - 创意企业作品展示网站WordPress汉化模板

Envato

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

12

12.12 惠不可挡

每逢双12,难免心潮澎湃,亲们,准备好了吗?

①、原版主题安装冬日暖心价60元/次(原价120元/次) ---》详询客服

①、云主机买一年送一年,买两年送两年,高速、稳定、免备案 ---》云主机

③、双十二限时促销,在模板市场购买任意模板赠送VIP年度会员火热进行中 ---》云模板

咨 询 客 服