Tab选项卡

简约时尚的纯CSS3 Tabs选项卡特效

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

简约时尚的纯CSS3 Tabs选项卡特效
这是一款使用纯 CSS3 制作的 Tabs 选项卡特效。该 Tabs 选项卡简约时尚,各个选项卡之间切换时使用了下划线跟随动画,整体效果非常不错。

HTML 结构

整个 Tabs 选项卡的 HTML 结构分为几个部分:使用<input>元素和一个无序列表来制作导航。

也想出现在这里?联系我们
创客主机
  1. <input type="radio" id="tab1" name="tab-control" checked>
  2. <input type="radio" id="tab2" name="tab-control">
  3. <input type="radio" id="tab3" name="tab-control">  
  4. <input type="radio" id="tab4" name="tab-control">
  5. <ul>
  6.   <li title="tab 1"><label for="tab1" role="button"><span>Tab 1</span></label></li>
  7.   <li title="tab 2"><label for="tab2" role="button"><span>Tab 2</span></label></li>
  8.   <li title="tab 3"><label for="tab3" role="button"><span>Tab 3</span></label></li>
  9.   <li title="tab 4"><label for="tab4" role="button"><span>Tab 4</span></label></li>
  10. </ul>

各个选项卡的内容包含在一个<div>元素中。

  1. <div class="content">
  2.   <section>
  3.     <h2>Tab 1 content</h2>
  4.   </section>
  5.   <section>
  6.     <h2>Tab 2 content</h2>
  7.   </section>
  8.   <section>
  9.     <h2>Tab 3 content</h2>
  10.   </section>
  11.   <section>
  12.     <h2>Tab 4 content</h2>
  13.   </section>
  14. </div>

用于制作下划线动画的线条使用一个<div>元素来制作。

  1. <div class="slider"><div class="indicator"></div></div>

CSS 样式

该 Tabs 选项卡的主要 CSS 样式如下:

  1. .tabs {
  2.   left: 50%;
  3.   -webkit-transform: translateX(-50%);
  4.   transform: translateX(-50%);
  5.   position: relative;
  6.   background: white;
  7.   padding: 50px;
  8.   padding-bottom: 80px;
  9.   width: 70%;
  10.   height: 250px;
  11.   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  12.   border-radius: 5px;
  13.   min-width: 240px;
  14. }
  15.  
  16. .tabs input[name="tab-control"] { display: none; }
  17.  
  18. .tabs .content section h2, .tabs ul li label {
  19.   font-weight: bold;
  20.   font-size: 18px;
  21.   color: #428BFF;
  22. }
  23.  
  24. .tabs ul {
  25.   list-style-type: none;
  26.   padding-left: 0;
  27.   display: -webkit-box;
  28.   display: -webkit-flex;
  29.   display: -ms-flexbox;
  30.   display: flex;
  31.   -webkit-box-orient: horizontal;
  32.   -webkit-box-direction: normal;
  33.   -webkit-flex-direction: row;
  34.   -ms-flex-direction: row;
  35.   flex-direction: row;
  36.   margin-bottom: 10px;
  37.   -webkit-box-pack: justify;
  38.   -webkit-justify-content: space-between;
  39.   -ms-flex-pack: justify;
  40.   justify-content: space-between;
  41.   -webkit-box-align: end;
  42.   -webkit-align-items: flex-end;
  43.   -ms-flex-align: end;
  44.   align-items: flex-end;
  45.   -webkit-flex-wrap: wrap;
  46.   -ms-flex-wrap: wrap;
  47.   flex-wrap: wrap;
  48. }
  49.  
  50. .tabs ul li {
  51.   box-sizing: border-box;
  52.   -webkit-box-flex: 1;
  53.   -webkit-flex: 1;
  54.   -ms-flex: 1;
  55.   flex: 1;
  56.   width: 25%;
  57.   padding: 0 10px;
  58.   text-align: center;
  59. }
  60.  
  61. .tabs ul li label {
  62.   -webkit-transition: all 0.3s ease-in-out;
  63.   transition: all 0.3s ease-in-out;
  64.   color: #929daf;
  65.   padding: 5px auto;
  66.   overflow: hidden;
  67.   text-overflow: ellipsis;
  68.   display: block;
  69.   cursor: pointer;
  70.   -webkit-transition: all 0.2s ease-in-out;
  71.   transition: all 0.2s ease-in-out;
  72.   white-space: nowrap;
  73.   -webkit-touch-callout: none;
  74.   -webkit-user-select: none;
  75.   -moz-user-select: none;
  76.   -ms-user-select: none;
  77.   user-select: none;
  78. }
  79.  
  80. .tabs ul li label br { display: none; }
  81.  
  82. .tabs ul li label svg {
  83.   fill: #929daf;
  84.   height: 1.2em;
  85.   vertical-align: bottom;
  86.   margin-right: 0.2em;
  87.   -webkit-transition: all 0.2s ease-in-out;
  88.   transition: all 0.2s ease-in-out;
  89. }
  90.  
  91. .tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {
  92.   outline: 0;
  93.   color: #bec5cf;
  94. }
  95.  
  96. .tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg { fill: #bec5cf; }
  97.  
  98. .tabs .slider {
  99.   position: relative;
  100.   width: 25%;
  101.   -webkit-transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
  102.   transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
  103. }
  104.  
  105. .tabs .slider .indicator {
  106.   position: relative;
  107.   width: 50px;
  108.   max-width: 100%;
  109.   margin: 0 auto;
  110.   height: 4px;
  111.   background: #428BFF;
  112.   border-radius: 1px;
  113. }
  114.  
  115. .tabs .content { margin-top: 30px; }
  116.  
  117. .tabs .content section {
  118.   display: none;
  119.   -webkit-animation-name: content;
  120.   animation-name: content;
  121.   -webkit-animation-direction: normal;
  122.   animation-direction: normal;
  123.   -webkit-animation-duration: 0.3s;
  124.   animation-duration: 0.3s;
  125.   -webkit-animation-timing-function: ease-in-out;
  126.   animation-timing-function: ease-in-out;
  127.   -webkit-animation-iteration-count: 1;
  128.   animation-iteration-count: 1;
  129.   line-height: 1.4;
  130. }
  131.  
  132. .tabs .content section h2 {
  133.   color: #428BFF;
  134.   display: none;
  135. }
  136.  
  137. .tabs .content section h2::after {
  138.   content: "";
  139.   position: relative;
  140.   display: block;
  141.   width: 30px;
  142.   height: 3px;
  143.   background: #428BFF;
  144.   margin-top: 5px;
  145.   left: 1px;
  146. }
  147.  
  148. .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
  149.   cursor: default;
  150.   color: #428BFF;
  151. }
  152.  
  153. .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg { fill: #428BFF; }
  154. @media (max-width: 600px) {
  155.  
  156. .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label { background: rgba(0, 0, 0, 0.08); }
  157. }
  158.  
  159. .tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider {
  160.   -webkit-transform: translateX(0%);
  161.   transform: translateX(0%);
  162. }
  163.  
  164. .tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) { display: block; }
  165.  
  166. .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
  167.   cursor: default;
  168.   color: #428BFF;
  169. }
  170.  
  171. .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg { fill: #428BFF; }
  172. @media (max-width: 600px) {
  173.  
  174. .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label { background: rgba(0, 0, 0, 0.08); }
  175. }
  176.  
  177. .tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider {
  178.   -webkit-transform: translateX(100%);
  179.   transform: translateX(100%);
  180. }
  181.  
  182. .tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > section:nth-child(2) { display: block; }
  183.  
  184. .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
  185.   cursor: default;
  186.   color: #428BFF;
  187. }
  188.  
  189. .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg { fill: #428BFF; }
  190. @media (max-width: 600px) {
  191.  
  192. .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label { background: rgba(0, 0, 0, 0.08); }
  193. }
  194.  
  195. .tabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider {
  196.   -webkit-transform: translateX(200%);
  197.   transform: translateX(200%);
  198. }
  199.  
  200. .tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > section:nth-child(3) { display: block; }
  201.  
  202. .tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
  203.   cursor: default;
  204.   color: #428BFF;
  205. }
  206.  
  207. .tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label svg { fill: #428BFF; }
  208. @media (max-width: 600px) {
  209.  
  210. .tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label { background: rgba(0, 0, 0, 0.08); }
  211. }
  212.  
  213. .tabs input[name="tab-control"]:nth-of-type(4):checked ~ .slider {
  214.   -webkit-transform: translateX(300%);
  215.   transform: translateX(300%);
  216. }
  217.  
  218. .tabs input[name="tab-control"]:nth-of-type(4):checked ~ .content > section:nth-child(4) { display: block; }
  219. @-webkit-keyframes 
  220. content {  from {
  221.  opacity: 0;
  222.  -webkit-transform: translateY(5%);
  223.  transform: translateY(5%);
  224. }
  225.  
  226. to {
  227.   opacity: 1;
  228.   -webkit-transform: translateY(0%);
  229.   transform: translateY(0%);
  230. }
  231. }
  232. @keyframes 
  233. content {  from {
  234.  opacity: 0;
  235.  -webkit-transform: translateY(5%);
  236.  transform: translateY(5%);
  237. }
  238.  
  239. to {
  240.   opacity: 1;
  241.   -webkit-transform: translateY(0%);
  242.   transform: translateY(0%);
  243. }
  244. }
  245. @media (max-width: 1000px) {
  246.  
  247. .tabs ul li label { white-space: initial; }
  248.  
  249. .tabs ul li label br { display: initial; }
  250.  
  251. .tabs ul li label svg { height: 1.5em; }
  252. }
  253. @media (max-width: 600px) {
  254.  
  255. .tabs ul li label {
  256.   padding: 5px;
  257.   border-radius: 5px;
  258. }
  259.  
  260. .tabs ul li label span { display: none; }
  261.  
  262. .tabs .slider { display: none; }
  263.  
  264. .tabs .content { margin-top: 20px; }
  265.  
  266. .tabs .content section h2 { display: block; }
  267. }
资源下载此资源下载价格为1立即购买,VIP 免费

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

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

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

发表评论

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

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

请扫码添加QQ好友后咨询!