Verwenden Sie CSS3, um den fünfzackigen Sternstil auf der Webseite zu implementieren (Prinzipanalyse).

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS3 zur Implementierung des Fünf-Stern-Stils. Er hat einen gewissen Referenzwert. Ich hoffe, er wird für Sie hilfreich sein.

Zu den verschiedenen Grafiken, die wir normalerweise auf Webseiten sehen, gehören Quadrate, Rechtecke, Dreiecke, Kreise usw. Die meisten davon werden mit CSS3 oder Hintergrundbildern realisiert, aber im Entwicklungsprozess wird der Hintergrund verwendet. Es gibt viele davon Mängel beim Abfangen von Bildern erfordern beispielsweise zusätzliche Anforderungen und stellen höhere Anforderungen an Bildpixel. Daher ist CSS3 zu einer gängigeren Implementierungsmethode geworden. Jetzt zeigen wir Ihnen die Verwendung von Pseudoelementen und die Transformation durch Zeichnen eines fünfzackigen Sterns.

Das Prinzip der Verwendung von CSS3 zur Implementierung des fünfzackigen Sternstils

Wir verwenden zunächst Elemente mit großen Kanten und Null-Inhaltsgröße zum Implementieren eines Dreiecksstils (für Einzelheiten beachten Sie bitte Verwenden von CSS3 zum Implementieren verschiedener Dreiecksstilsammlungen in Webseiten), dann verwenden Sie Pseudoelemente: after und :before, um 2 Dreiecke davon zu klonen Gleiche Größe und schließlich diese beiden Pseudoelemente verwenden. Auf die Elemente werden unterschiedliche Rotationstransformationen angewendet, um den Stil des fünfzackigen Sterns zu erreichen.

CSS3-Pseudoelement

Der Hauptzweck von CSS besteht darin, Stile zu HTML-Elementen hinzuzufügen Eine Funktion in CSS, die es uns ermöglicht, zusätzliche Elemente hinzuzufügen, ohne das Dokument selbst zu stören, wird als Pseudoelement bezeichnet. Anfangs war die Syntax von Pseudoelementen „:“, aber nach der Überarbeitung von CSS3 wurde „::“ einheitlich verwendet, um Pseudoelemente und Pseudoklassen (wie :hover, :active usw.) zu unterscheiden. Dieser Artikel bezieht sich auf zwei Pseudoelemente: before und :after. :before fügt ein Element vor dem Inhalt hinzu und :after fügt ein Element nach dem Inhalt hinzu (wir können das Attribut content verwenden, um Inhalt zwischen ihnen hinzuzufügen).

CSS3s neues Attribut transform

Das Transformationsattribut wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen. In diesem Artikel wird Transformation verwendet, um die beiden geklonten Dreiecke in verschiedene Richtungen zu drehen.

Schritte und Implementierungscode zum Implementieren des fünfzackigen Sternstils mit CSS3

Schritt 1: Erstellen Sie ein Dreieck

.tri {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid red;
}

Schritt 2: Wir verwenden die Pseudoelemente :after und :before, um 2 gleich große Dreiecke zu klonen

.tri:after,.tri:before {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid red;
}

Schritt 3: Teilen Sie das Obige auf Jeweils 2 Pseudoelemente Führen Sie eine 70°-Rotationstransformation in verschiedene Richtungen durch

.tri:before {
    transform: rotate(70deg);
}
.tri:after {
    transform: rotate(-70deg);
}

Verwenden Sie CSS3, um den fünfzackigen Sterneffekt zu erzielen, wie in der Abbildung gezeigt

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um den fünfzackigen Sternstil auf der Webseite zu implementieren (Prinzipanalyse).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!