So implementieren Sie animierte TAB-Wechsel

Dieses Mal zeige ich Ihnen, wie Sie animierte TAB-Wechsel implementieren und welche Vorsichtsmaßnahmen für die Implementierung animierter TAB-Wechsel gelten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Der Designer hat eine Darstellung des Tab-Wechsels gegeben. Obwohl es sich um eine kleine Funktion handelt, müssen Front-End-Ingenieure bei der Implementierung noch viele Details beachten. Ich habe eine Demo als Referenz geschrieben.

Der Endeffekt ist wie folgt:

Damit die GIF-Animation Details anzeigt, habe ich die Animationszeit auf 3 Sekunden verlängert

Implementierungsidee

Intervall vertikaler Linien, da diese nicht vertikal sind und daher keine Ränder verwendet werden können. Ich werde Pseudoelemente verwenden.

hat nur 3 vertikale Balken, aber 4 li s. Dies ist einfach und kann mit dem Selektor :not(:first-child) ausgewählt werden.

Der Wechsel der Hintergrundfarbe ändert sich, weil ich einen Effekt von klein nach groß erzielen möchte. Daher kann ich die Hintergrundfarbe nicht direkt verwenden, um dies zu erreichen.

Wenn die Größe des Pseudoelements zur Steuerung verwendet wird, wird die Berechnung komplizierter, daher möchte ich Box-Shadow verwenden, um dies zu erreichen.

Okay, das ist es. Beginnen wir mit dem Schreiben des Codes wie folgt:

HTML-Code

  <p class="m">
    <ul class="tab">
      <li><a href="">导航1</a></li>
      <li><a href="">导航2</a></li>
      <li><a href="">导航3</a></li>
      <li><a href="">导航4</a></li>
    </ul>
  </p>

Die obige Codestruktur ist, was wir tun Ich habe es schon einmal gemacht. Sobald es geschrieben ist, denke ich, dass es in Ordnung ist, also werde ich keine Anpassungen vornehmen. Es gibt keinen umständlichen Code.

CSS-Code

.m { margin: 100px; }
.tab { width: 400px; margin: 0 auto; border: 1px solid #ddd; height: 40px; text-align: center; line-height: 40px; background: #fff; border-radius: 10px; overflow: hidden; }
.tab li { float: left; width: 100px; position: relative; overflow: hidden; }
.tab li:before, .tab li:after, .tab li a { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
.tab li:before, .tab li:after { content: ""; display: block; }
.tab li:not(:first-child):after { background: #ddd; height: 20px; width: 1px; left: 0; top: 10px; position: absolute; }
.tab li a { display: block; position: relative; z-index: 2; color: #000; font-size: 14px; }
.tab li:before { width: 0; height: 0; top: 50%; left: 50%; z-index: 1; position: absolute; }
.tab li:hover a { color: #fff; }
.tab li:hover:before { box-shadow: 0 0 0 100px #36bc99; }
.tab li:hover + li:after, .tab li:hover:after { height: 0; top: 20px; }

Codeanalyse:

Animationsimplementierung ist sehr einfach, verwenden Sie einfach das Übergangsattribut.

Um Ihr eigenes Pseudoelement und das Pseudoelement des nächsten Geschwisterelements zu steuern, verwenden Sie einfach den +-Selektor.

Andere Codes sind relativ klar und einfach, Sie können sie selbst analysieren.

Es ist sehr einfach, diesen Effekt zu erzielen. Der Fokus liegt auf der täglichen Akkumulation und der flexiblen Kombination verschiedener Parameter. Das Nachdenken über die Implementierungsmethode und das schließliche Schreiben des Codes geht sehr schnell. Und es gibt keinen Höhepunkt des Wissens darin.

Der Grund, warum CSS schwierig ist, liegt nicht darin, dass Sie nicht wissen, wie man es macht, sondern dass Sie nicht wissen, wie man es anpasst.

Eigentlich haben wir nur 99 % des Designeffekts wiederhergestellt. Eine der beiden Linien befindet sich innerhalb des Hintergrunds und die andere außerhalb des Hintergrunds. Was soll ich tun, wenn ich beide Trennlinien einfügen möchte? Linien im Hintergrund? Wie sieht es mit der Umsetzung aus? Sie können darüber nachdenken.

Nutzen Sie scss. Das obige CSS ist kompiliert. Tatsächlich ist die Implementierung mit scss sehr bequem und schnell und der Code ist besser lesbar.

Die Demonstration sieht wie folgt aus:

.m {
  margin: 100px;
}
.tab {
  width: 400px;margin: 0 auto;border: 1px solid $cdd;height: 40px;text-align: center;line-height: 40px;
  background: $cff;border-radius: 10px;overflow: hidden;
  li {
    float: left;width: 100px;position: relative;overflow: hidden;
    &:before,&:after,a {@include dz();}
    &:before,&:after {
      content: "";display: block;
    }
    &:not(:first-child) {
      &:after {
        background: $cdd;height: 20px;width: 1px;left: 0;top: 10px;position: absolute;
      }
    }
    a {
      display: block;position: relative;z-index: 2;color: $c00;font-size: 14px;
    }
    &:before {
      width: 0;height: 0;top: 50%;left: 50%;z-index: 1;position: absolute;
    }
    &:hover {
      a {color: $cff;}
      &:before {
        box-shadow: 0 0 0 100px $cyan;
      }
      & + li:after,&:after {
        height: 0;top: 20px;
      }
    }
  }
}

Natürlich habe ich in diesem Code Farbvariablen und Mixin-Code verwendet. Sie können es nicht direkt verwenden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Detaillierte Erklärung der Verwendung von Zeigerereignissen in CSS3

Detaillierte Erklärung der Verwendung von Fokus-innerhalb

Das obige ist der detaillierte Inhalt vonSo implementieren Sie animierte TAB-Wechsel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!