Ausführliche Erklärung der CSS3-Übergangsanimation der Menüleiste „drei', die sich in „X' verwandelt

Ich wollte kürzlich eine Seite nachahmen, und einer der Effekte ist der Effekt, dass sich die drei Menüleisten in

Bild (2) Mouse-Hover-Effekt

Idee:

Implementierung von drei horizontalen Linien

: Traditionell Dies kann mit drei Span-Tags erreicht werden, es gibt jedoch einen clevereren Weg. Laut Meister teilte Zhang Xinxu die Idee, den Effekt von drei mit einem Etikett zu erzielen Das allgemeine Prinzip besteht darin, „Rand oben“, „Hintergrund“ und „Rand unten“ für die oberen, mittleren und unteren horizontalen Linien zu verwenden. Verwenden Sie zum Ausschneiden den Hintergrundclip: Inhaltsfeld und erweitern Sie ihn schließlich mit der Polsterung nach oben und unten, um den visuellen Effekt von drei horizontalen Linien zu erzielen,

X-Implementierung : und das deformierte Es erfordert Geduld, den Winkel einzustellen. Es ist zu beachten, dass die Verwendung von Padding zur Erzielung des Drei-Horizontal-Effekts nicht sehr empfindlich gegenüber Auslösern ist. Es ist am besten, das Symbol-Tag mit einer Beschriftung zu umschließen und dies auf der Umhüllungsebene zu tun: Hover-Trigger.

Das Folgende ist der Code