簡約時尚的純CSS3 Tabs選項卡特效

簡要教程

這是一款使用純CSS3製作的Tabs選項卡特效。該Tabs選項卡簡約時尚，各個選項卡之間切換時使用了底線跟隨動畫，整體效果非常不錯。

HTML結構

整個Tabs選項卡的HTML結構分為幾個部分：使用<input>元素和一個無序列表來製作導航。

<input type="radio" id="tab1" name="tab-control" checked><input type="radio" id="tab2" name="tab-control"><input type="radio" id="tab3" name="tab-control">  <input type="radio" id="tab4" name="tab-control"><ul>  <li title="tab 1"><label for="tab1" role="button"><span>Tab 1</span></label></li>  <li title="tab 2"><label for="tab2" role="button"><span>Tab 2</span></label></li>  <li title="tab 3"><label for="tab3" role="button"><span>Tab 3</span></label></li>  <li title="tab 4"><label for="tab4" role="button"><span>Tab 4</span></label></li></ul>

各個選項卡的內容包含在一個<p>元素中。

<p class="content">  <section>    <h2>Tab 1 content</h2>  </section>  <section>    <h2>Tab 2 content</h2>  </section>  <section>    <h2>Tab 3 content</h2>  </section>  <section>    <h2>Tab 4 content</h2>  </section></p>

用於製作底線動畫的線條使用一個<p>元素來製作。

<p class="slider"><p class="indicator"></p></p>

CSS樣式

該Tabs選項卡的主要CSS樣式如下：

.tabs {  left: 50%;  -webkit-transform: translateX(-50%);  transform: translateX(-50%);  position: relative;  background: white;  padding: 50px;  padding-bottom: 80px;  width: 70%;  height: 250px;  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);  border-radius: 5px;  min-width: 240px;} .tabs input[name="tab-control"] { display: none; } .tabs .content section h2, .tabs ul li label {  font-weight: bold;  font-size: 18px;  color: #428BFF;} .tabs ul {  list-style-type: none;  padding-left: 0;  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: horizontal;  -webkit-box-direction: normal;  -webkit-flex-direction: row;  -ms-flex-direction: row;  flex-direction: row;  margin-bottom: 10px;  -webkit-box-pack: justify;  -webkit-justify-content: space-between;  -ms-flex-pack: justify;  justify-content: space-between;  -webkit-box-align: end;  -webkit-align-items: flex-end;  -ms-flex-align: end;  align-items: flex-end;  -webkit-flex-wrap: wrap;  -ms-flex-wrap: wrap;  flex-wrap: wrap;} .tabs ul li {  box-sizing: border-box;  -webkit-box-flex: 1;  -webkit-flex: 1;  -ms-flex: 1;  flex: 1;  width: 25%;  padding: 0 10px;  text-align: center;} .tabs ul li label {  -webkit-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out;  color: #929daf;  padding: 5px auto;  overflow: hidden;  text-overflow: ellipsis;  display: block;  cursor: pointer;  -webkit-transition: all 0.2s ease-in-out;  transition: all 0.2s ease-in-out;  white-space: nowrap;  -webkit-touch-callout: none;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;} .tabs ul li label br { display: none; } .tabs ul li label svg {  fill: #929daf;  height: 1.2em;  vertical-align: bottom;  margin-right: 0.2em;  -webkit-transition: all 0.2s ease-in-out;  transition: all 0.2s ease-in-out;} .tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {  outline: 0;  color: #bec5cf;} .tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg { fill: #bec5cf; } .tabs .slider {  position: relative;  width: 25%;  -webkit-transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);  transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);} .tabs .slider .indicator {  position: relative;  width: 50px;  max-width: 100%;  margin: 0 auto;  height: 4px;  background: #428BFF;  border-radius: 1px;} .tabs .content { margin-top: 30px; } .tabs .content section {  display: none;  -webkit-animation-name: content;  animation-name: content;  -webkit-animation-direction: normal;  animation-direction: normal;  -webkit-animation-duration: 0.3s;  animation-duration: 0.3s;  -webkit-animation-timing-function: ease-in-out;  animation-timing-function: ease-in-out;  -webkit-animation-iteration-count: 1;  animation-iteration-count: 1;  line-height: 1.4;} .tabs .content section h2 {  color: #428BFF;  display: none;} .tabs .content section h2::after {  content: "";  position: relative;  display: block;  width: 30px;  height: 3px;  background: #428BFF;  margin-top: 5px;  left: 1px;} .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {  cursor: default;  color: #428BFF;} .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg { fill: #428BFF; }@media (max-width: 600px) { .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label { background: rgba(0, 0, 0, 0.08); }} .tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider {  -webkit-transform: translateX(0%);  transform: translateX(0%);} .tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) { display: block; } .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {  cursor: default;  color: #428BFF;} .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg { fill: #428BFF; }@media (max-width: 600px) { .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label { background: rgba(0, 0, 0, 0.08); }} .tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider {  -webkit-transform: translateX(100%);  transform: translateX(100%);} .tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > section:nth-child(2) { display: block; } .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {  cursor: default;  color: #428BFF;} .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg { fill: #428BFF; }@media (max-width: 600px) { .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label { background: rgba(0, 0, 0, 0.08); }} .tabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider {  -webkit-transform: translateX(200%);  transform: translateX(200%);} .tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > section:nth-child(3) { display: block; } .tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {  cursor: default;  color: #428BFF;} .tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label svg { fill: #428BFF; }@media (max-width: 600px) { .tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label { background: rgba(0, 0, 0, 0.08); }} .tabs input[name="tab-control"]:nth-of-type(4):checked ~ .slider {  -webkit-transform: translateX(300%);  transform: translateX(300%);} .tabs input[name="tab-control"]:nth-of-type(4):checked ~ .content > section:nth-child(4) { display: block; }@-webkit-keyframes content {  from { opacity: 0; -webkit-transform: translateY(5%); transform: translateY(5%);} to {  opacity: 1;  -webkit-transform: translateY(0%);  transform: translateY(0%);}}@keyframes content {  from { opacity: 0; -webkit-transform: translateY(5%); transform: translateY(5%);} to {  opacity: 1;  -webkit-transform: translateY(0%);  transform: translateY(0%);}}@media (max-width: 1000px) { .tabs ul li label { white-space: initial; } .tabs ul li label br { display: initial; } .tabs ul li label svg { height: 1.5em; }}@media (max-width: 600px) { .tabs ul li label {  padding: 5px;  border-radius: 5px;} .tabs ul li label span { display: none; } .tabs .slider { display: none; } .tabs .content { margin-top: 20px; } .tabs .content section h2 { display: block; }

以上就是簡約時尚的純CSS3 Tabs選項卡特效的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

相關文章：

小程式：如何?tabs選項卡效果樣本

小程式 tabs選項卡效果的實現

javascript實現tabs選項卡轉場效果

