Unglaubliche CSS-Navigationsleiste unterstreiche folgenden Effekt

Der erste Cutter in China github.com/chokcoco

Hier ist zunächst ein Bild. Wie können wir mit reinem CSS den folgenden Effekt erzielen?

Machen Sie eine kurze Pause, bevor Sie weiterlesen. Versuchen Sie, über den obigen Effekt nachzudenken oder ihn selbst auszuprobieren, und prüfen Sie, ob Sie den obigen Effekt ohne die Hilfe von JS geschickt erzielen können.

OK, weiter. Dieser Effekt ist ein ähnliches kleines Problem, auf das ich während des Geschäftsentwicklungsprozesses gestoßen bin. Selbst wenn man mich bitten würde, Javascript zu verwenden, wäre meine erste Reaktion, dass es sehr mühsam wäre. Daher habe ich mich gefragt, ob es möglich ist, diesen Effekt nur mit CSS zu erzielen.

Anforderungen definieren

Definieren wir eine einfache Regel mit den folgenden Anforderungen:

Nehmen wir an, dass die HTML-Struktur wie folgt ist:

<ul>
  <li>Erstaunliches CSS</li>
  <li>Navigationsleiste</li>
  <li>Dem Cursor folgt eine kleine Unterstreichung</li>
  <li>REINES CSS</li>
  <li>Nav-Unterstreichung</li>
</ul>

• Die Breite der li ist nicht festgelegt.
• Beim Wechseln vom li zum rechten li der Navigation bewegt sich die Unterstreichung von links nach rechts. Ebenso verhält es sich, wenn Sie vom rechten li der Navigation zum linken li wechseln, denn die Unterstreichung bewegt sich von rechts nach links.

Realisierungsanforderungen

Als ich diesen Effekt zum ersten Mal sah, dachte ich, dass die folgende Animation nicht allein mit CSS zu erreichen sei.

Wer dies nur mit CSS erreichen möchte, dem bleibt nur ein anderer Weg und die Anwendung einiger ausgefeilter Methoden.

OK, verwenden wir einige Tricks und CSS, um diesen Effekt Schritt für Schritt zu erzielen. Analysieren Sie die Schwierigkeiten:

Die Breite ist nicht festgelegt

Die erste Schwierigkeit besteht darin, dass die Breite von li nicht festgelegt ist. Daher müssen wir möglicherweise einige Anpassungen an der Breite li Elements selbst vornehmen.

Da die Breite jedes einzelnen li nicht festgelegt ist, muss die Länge des entsprechenden Unterstrichs angepasst werden. Natürlich würden wir daran denken, dessen border-bottom zu verwenden.

li {
    Rahmen unten: 2pxsolid#000;
}

Jetzt könnte es also so aussehen (li sind miteinander verbunden und die Lücken zwischen li werden durch padding erzeugt):

Natürlich gibt es zunächst keine Unterstriche, daher müssen wir sie möglicherweise ausblenden.

li {
    Rahmen unten: 0pxsolid#000;
}

Beginnen Sie noch einmal mit Pseudoelementen

Dies scheint nicht zu funktionieren, da nach dem Ausblenden beim Schweben über li eine Unterstreichungsanimation erforderlich ist und li selbst sicherlich nicht verschoben werden kann. Daher ziehen wir die Verwendung von Pseudoelementen in Betracht. Wenden Sie auf jedes li Pseudoelement eine Unterstreichung an.

li::vor {
    Inhalt: "";
    Position: absolut;
    oben: 0;
    links: 0;
    Breite: 100 %;
    Höhe: 100%;
    Rahmen unten: 2pxsolid#000;
}

Betrachten wir den ersten Schritt der Animation. Beim Hovern soll sich die Unterlinie von einer Seite aus bewegen und ausdehnen. Daher verwenden wir die absolute Positionierung, um die Breite li auf 0 zu setzen. Beim Hovern ändert sich die Breite von width: 0 -> width: 100% . Das CSS lautet wie folgt:

li::vor {
    Inhalt: "";
    Position: absolut;
    oben: 0;
    links: 0;
    Breite: 0;
    Höhe: 100%;
    Rahmen unten: 2pxsolid#000;
}

li:hover::vor {
    Breite: 100 %;
}

Es wurden folgende Ergebnisse erzielt:

OK, ich habe das Gefühl, dem Erfolg einen Schritt näher zu sein. Nun müssen wir uns mit dem schwierigsten Problem befassen:

So können Sie erreichen, dass die Linie der Bewegung des Cursors folgt, sodass sich die Unterstreichung von links nach rechts bewegt, wenn Sie vom linken li der Navigation zum rechten li wechseln. Ebenso verhält es sich, wenn Sie vom rechten li der Navigation zum linken li wechseln, denn die Unterstreichung bewegt sich von rechts nach links.

Schauen wir uns die aktuelle Wirkung genauer an:

Beim Wechsel vom ersten li zum zweiten li ist die Richtung der Unterstreichungsrücknahme des ersten li falsch. Daher müssen wir möglicherweise die Anfangsposition der Unterstreichung verschieben und auf left: 100% setzen, damit bei jedem Zurückziehen der Unterstreichung das erste li korrekt ist:

li::vor {
    Inhalt: "";
    Position: absolut;
    oben: 0;
    links: 100 %;
    Breite: 0;
    Höhe: 100%;
    Rahmen unten: 2pxsolid#000;
}

li:hover::vor {
    links: 0;
    Breite: 100 %;
}

Sehen Sie die Wirkung:

Wenn Sie die beiden Bilder genau vergleichen, werden Sie feststellen, dass der zweite Effekt tatsächlich darin besteht, dass Sesamkörner aufgenommen und Wassermelonen verloren werden. Die Richtung des ersten li ist richtig, aber die Richtung der Unterstreichung des zweiten li ist falsch.

Daher benötigen wir dringend eine Methode, mit der der Bewegungsmodus der Unterstreichung des nächsten li geändert werden kann, ohne den Bewegungsmodus der Unterstreichung des aktuellen Hover- li zu ändern (so verwirrend).

Das ist richtig, hier können wir den ~ -Selektor verwenden, um diese schwierige Mission abzuschließen, die auch der wichtigste Teil in diesem Beispiel ist.

Für das aktuell schwebende li ist die Positionierung der Unterstreichung des entsprechenden Pseudoelements left: 100% , während für li:hover ~ li::before “ die Positionierung left: 0 ist. Der CSS-Code lautet wie folgt:

li::vor {
    Inhalt: "";
    Position: absolut;
    oben: 0;
    links: 100 %;
    Breite: 0;
    Höhe: 100%;
    Rahmen unten: 2pxsolid#000;
    Übergang: 0,2salllinear;
}

li:hover::vor {
    Breite: 100 %;
    links: 0;
}

li:hover~li::vor {
    links: 0;
}

An diesem Punkt ist der gewünschte Effekt erreicht! Blumen streuen. schau mal rein:

Der Effekt ist gut, aber etwas steif. Den oben genannten Effekt können wir erzielen , indem wir die Easing-Funktion entsprechend ändern und eine Animationsverzögerung hinzufügen. Natürlich ist dies nur das Sahnehäubchen.

Die vollständige DEMO finden Sie hier: CodePen --Demo

endlich

Der größte Fehler dieser Methode besteht darin, dass beim Eingeben des ersten Li die Linie nur von rechts nach links verlaufen kann. Abgesehen davon kann der folgende Effekt sehr gut erzielt werden.

Ich habe schon lange keine Updates mehr gemacht. In letzter Zeit bin ich besessen davon, Blockchain-bezogene Technologien wie Ethereum-Programmierung, das Schreiben von Smart Contracts usw. zu lernen. In Zukunft werde ich mich noch mehr auf mein eigenes Gebiet konzentrieren und mehr Front-End-Artikel schreiben. Der Charme von CSS ist immer noch unwiderstehlich.

Weitere wunderbare technische CSS-Artikel sind in meinem Github – iCSS – gesammelt. Sie werden ständig aktualisiert. Klicken Sie einfach auf einen Stern, um sich anzumelden und zu sammeln.

Zusammenfassen

Oben sehen Sie den unglaublichen CSS-Navigationsleisten-Unterstreichungseffekt, den ich Ihnen vorgestellt habe. Ich hoffe, er wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!