Simple and stylish Pure CSS3 tabs tab effects

Brief tutorials

This is a tabs option made with pure CSS3 Carter effect. The Tabs tab is simple and stylish, with an underscore followed by an animation when switching between tabs, and the overall effect is very good.

HTML structure

The HTML structure of the entire Tabs tab is divided into several parts: using the <input> element and an unordered list to make navigation.

<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>

The contents of each tab are contained within a <p> element.

<p class= "Content" >  <section>    
The lines used to make the underline animation are made using a <p> element.

<p class= "Slider" ><p class= "indicator" ></p></p>
CSS Styles

The main CSS styles for the Tabs tab are as follows:

. 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 {curs  Or: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) > Lab  El {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 {OPAC  Ity: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. con Tent section H2 {Display:block;}
The above is the simple and fashionable pure CSS3 tabs tab effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

Related articles:

Applet: How to Implement the Tabs tab effect example

Implementation of Tabs tab effect for small programs

JavaScript Implements tabs tab Toggle Effect

