Wie man div in CSS zu Herzen nimmt

So setzen Sie ein Div mit CSS in ein Herz: Erstellen Sie zunächst eine HTML-Beispieldatei und weisen Sie dann dessen ID als Herz zu. Drehen Sie dann den Vorher- und Nachher-Inhalt in ein Herz Form Das ist es.

Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer

Verwenden Sie CSS, um Herzformen zu zeichnen

Wir stoßen oft auf herzförmige Muster, wie z. B. Like und Cancel Like Szenarien. Die bisherige Verwendungsmethode war der Bildzugriff, der als img oder backgroundImage in den Dom eingefügt wurde. Zeichnen Sie nun selbst ein herzförmiges Muster mit CSS.

Herzform

Bereiten Sie ein Dom-Element wie folgt vor und weisen Sie dem Herzen seinen ID-Wert zu läuft nicht mehr. Beginnen wir nun mit der Manipulation von Pseudoelementen

<div id="heart"></div>

emmm... Die Form kann nicht beschrieben werden, schauen wir uns einfach das Bild oben an... Die Form sollte bisher so aussehen.

Als nächstes müssen Sie die Vorher- und Nachher-Inhalte rotieren. Der Code lautet wie folgt:

#heart {
    position: relative;
    width:50px;
    height:40px;
}

Das Bild oben...

[Empfohlenes Lernen:

CSS-Video-Tutorial]

Das obige ist der detaillierte Inhalt vonWie man div in CSS zu Herzen nimmt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!