Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Einfacher und stilvoller reiner CSS3-Tabs-Tab-Effekt

黄舟
Freigeben: 2017-03-24 13:43:15
Original
2118 Leute haben es durchsucht

Kurzes Tutorial

Dies ist ein Tabs-Tab-Effekt, der mit reinem CSS3 erstellt wurde. Die Registerkarte „Tabs“ ist einfach und elegant und die folgende Unterstreichungsanimation wird beim Wechseln zwischen Tabs verwendet. Der Gesamteffekt ist sehr gut.

HTML-Struktur

Die HTML-Struktur der gesamten Registerkarte „Registerkarten“ ist in mehrere Teile unterteilt: Verwenden Sie

<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>
Nach dem Login kopieren

Der Inhalt jeder Registerkarte ist in einem

-Element enthalten.

<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>
Nach dem Login kopieren

Die zum Animieren der Unterstreichung verwendete Linie wird mithilfe eines

-Elements erstellt.

<p class="slider"><p class="indicator"></p></p>
Nach dem Login kopieren

CSS-Stil

Die wichtigsten CSS-Stile der Registerkarte „Tabs“ sind wie folgt:

.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; }
Nach dem Login kopieren

Das Obige ist der Inhalt des einfachen und stilvollen reinen CSS3 Tabs-Tab-Effekt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Verwandte Artikel:

WeChat Mini-Programm: Beispiel für die Implementierung des Tabs-Effekts

Implementierung des Tabs-Effekts im WeChat Mini-Programm

Javascript implementiert den Tab-Wechseleffekt

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage