css3hideshow

CSS3 Hide Show

CSS3 ist der neueste CSS-Standard, der uns mehr Stiloptionen und Steuerelemente bietet, darunter die Steuerung zum Ausblenden und Anzeigen von Elementen. In diesem Artikel werden wir darüber sprechen, wie man Elemente mit CSS3 ein- und ausblendet und wo diese Technik von Vorteil sein kann.

In CSS3 gibt es vier Anzeigeeigenschaften: none, block, inline und inline-block. Die am häufigsten verwendeten sind „none“ und „block“. none bedeutet, das Element vollständig auszublenden, und block bedeutet, das Element in einem Block auf dem Bildschirm anzuzeigen.

Um einen Versteck- und Anzeigeeffekt zu erzielen, müssen wir diese Anzeigeeigenschaften in Kombination mit einigen anderen Eigenschaften in CSS3 verwenden. Hier sind einige Eigenschaften, mit denen Sie diese Effekte besser erzielen können:

display:none: Blenden Sie das Element vollständig aus. Wenn ein Element auf diese Eigenschaft festgelegt ist, wird es nicht auf der Seite gerendert.

display:block: Elemente auf dem Bildschirm in Blockform anzeigen. Diese Eigenschaft wird normalerweise verwendet, um ausgeblendete Elemente wieder auf dem Bildschirm anzuzeigen.

visibility:hidden: Versteckt das Element, aber der Platz, den es einnimmt, ist noch vorhanden. Dieses Attribut wird normalerweise verwendet, wenn das ursprüngliche Layout beibehalten werden muss, um Probleme beim Seitenlayout zu vermeiden.

visibility:visible: Das Element sichtbar machen. Diese Eigenschaft macht das Element nach dem Ausblenden wieder sichtbar.

opacity:0: Machen Sie das Element transparent und verbergen Sie es so. Diese Eigenschaft wird normalerweise verwendet, wenn Glättungs-/Fading-Effekte erforderlich sind.

opacity:1: Setzt die Transparenz auf den Normalwert (1) zurück, sodass das Element wieder sichtbar ist und andere Elemente normal dargestellt werden können.

Übergang: alle 0,5 s Leichtigkeit: Stellen Sie die Übergangszeit von Stilattributänderungen auf eine halbe Sekunde (0,5 s) und den Übergangseffekt auf „leicht“ ein. Diese Eigenschaft wird häufig verwendet, um sanfte CSS-Übergangseffekte zu erzeugen.

Als nächstes zeigen wir anhand von Beispielen, wie Sie mit den oben genannten Eigenschaften Ausblend- und Anzeigeeffekte erzielen.

Zuerst verwenden wir das Attribut display:none, um ein Element vollständig auszublenden, etwa so:

.hide-me{
    display:none;
}

Dadurch werden Elemente mit der Klasse „hide-me“ ausgeblendet.

Wir können dann die Anzeige dieses Elements mithilfe von display:block oder display:inline-block wiederherstellen, wie unten gezeigt:

.show-me{
    display:block;
}

Dadurch wird das Element mit der Klasse „show-me“ als Element auf Blockebene festgelegt und wieder angezeigt auf dem Bildschirm.

Als nächstes können wir „visibility:hidden“ verwenden, um das Element auszublenden, aber der Platz, den es einnimmt, ist immer noch vorhanden, wie unten gezeigt:

.hide-me{
    visibility:hidden;
}

Dadurch wird das Element mit der Klasse „hide-me“ ausgeblendet und sichtbar gemacht Die Seite nimmt immer noch den gleichen Platz im Layout ein.

Wir können dann „visibility:visible“ verwenden, um das Ausblenden des Elements zu beenden und es erneut anzuzeigen, etwa so:

.show-me{
    visibility:visible;
}

Dadurch wird das Element mit der Klasse „show-me“ erneut auf der Seite angezeigt.

Wenn Sie einen sanfteren Übergangseffekt benötigen, können Sie das Opazitätsattribut wie folgt verwenden:

.hide-me{
    opacity:0;
    transition:all 0.5s ease;
}

Dadurch werden Elemente mit der Klasse „hide-me“ auf transparent gesetzt und die Übergangszeit für Stiländerungen auf halbe Sekunden (0,5 s) festgelegt. und stellen Sie den Übergangseffekt auf „einfach“ ein.

Schließlich können Sie „opacity:1“ und „transition:all 0.5s“ verwenden, um das Ausblenden zu beenden und das Element dem Benutzer wie folgt anzuzeigen:

.show-me{
    opacity:1;
    transition:all 0.5s ease;
}

Dadurch wird das Element mit der Klasse „show-me“ undurchsichtig und ausgeblendet reibungslos in einer halben Sekunde.

Zusammenfassung:

CSS3 bietet eine Reihe von Eigenschaften, mit denen wir die Ausblend- und Anzeigeeffekte von Elementen besser steuern können. Unterschiedliche Attribute entsprechen im Allgemeinen unterschiedlichen Anwendungsszenarien, die Webdesign, Design visueller Effekte, Design der Benutzererfahrung usw. umfassen können. Während wir unsere Website oder Benutzeroberfläche interaktiver und visueller gestalten, kann der Effekt des Ausblendens/Einblendens von Elementen die Designmöglichkeiten der meisten unserer Produkte und Dienstleistungen optimieren.

Das obige ist der detaillierte Inhalt voncss3hideshow. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!