CSS-Schiebetür Ausführliche Erklärung der Schiebetür

Tatsächlich ist das Konzept der CSS-Schiebetüren schon vor einigen Jahren aufgetaucht, in den letzten Jahren wurde es jedoch häufiger erwähnt. Aber die Leute verwechseln es oft mit dem Tab-Effekt, insbesondere einige unerfahrene Freunde, deshalb werde ich hier eine ausführliche Erklärung schreiben, in der Hoffnung, dass sie hilfreich ist.

Apropos Schiebetüren sind keine hochentwickelte Technologie, sondern lediglich eine CSS-Technik. Es nutzt die Überlappung und Verschiebung von Hintergrundbildern, um einige Effekte zu erzielen. Am gebräuchlichsten ist die Navigation mit abgerundeten Ecken. Wir können uns die beiden Hintergründe mit abgerundeten Ecken, einen links und einen rechts, als zwei Schiebetüren vorstellen. Sie können zusammengeschoben werden und sich überlappen, um weniger Inhalte anzuzeigen, oder sie können gegeneinander verschoben werden Andere. Öffnen Sie, um weitere Inhalte anzuzeigen, wie unten gezeigt:

In einigen früheren Tutorials habe ich das Hintergrundbild zum Zusammenfügen gerne in zwei Teile geschnitten, einen breiten und einen schmalen.

Hier verwenden wir nur die beiden Tags „a“ und „span“. Der Stil kann drei Zustände definieren, was als der einfachste Weg gilt.