HTML5 und CSS3 realisieren den Umschalteffekt intelligenter Animationen

Dieser Artikel zeigt Ihnen eine Demo, die auf HTML5+CSS3 basiert, um einen intelligenten animierten TAB-Wechseleffekt zu erzielen. Er ist sehr gut und hat Referenzwert.

Der Designer gab einen Tab-Wechsel-Effekt. 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.

Es gibt nur 3 vertikale Balken, aber es gibt 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 wurde bereits geschrieben. Ich denke, sie ist in Ordnung, daher 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; }

Code-Analyse:

Animationsimplementierung Es ist ganz 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 ist wie folgt:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie den linearen Farbverlauf von CSS3, um einen Rahmen zu erstellen

So blenden Sie die Bildlaufleiste aus in CSS

Das obige ist der detaillierte Inhalt vonHTML5 und CSS3 realisieren den Umschalteffekt intelligenter Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!