Heim > Artikel > Web-Frontend > Wie man mit CSS ein rotes Herz erstellt
Wie man mit CSS ein rotes Herz erstellt
- 藏色散人Original
- 2021-02-28 15:17:062195Durchsuche
So erstellen Sie ein rotes Herz mit CSS: Erstellen Sie zuerst eine HTML-Beispieldatei, zeichnen Sie dann einen Kreis über CSS-Attribute und implementieren Sie schließlich den Herzstil über das Rotate-Attribut .
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Machen Sie eine Liebe mit CSS
Zusammenfassung: HTML-Tags sind relativ einfach und der Einstieg ist sehr schnell, aber CSS erfordert, dass wir tief in die Materie eintauchen. Viele der darin enthaltenen Stilattribute können durch Beherrschung realisiert werden ein paar häufig verwendete Effekte. Jetzt zeige ich Ihnen, wie Sie mit CSS ein Herz erstellen.
Vorkenntnisse:
- Verstehen, wie man ein Quadrat zeichnet.
- Verstehe, wie man Kreise zeichnet.
- Verstehen Sie, was Positionierung ist.
- Verstehen Sie, wie man dreht.
Lassen Sie mich Ihnen ohne weitere Umschweife zunächst beibringen, wie Sie mit CSS einen Kreis zeichnen.
.disc1{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:300px 0px 0px 300px;
border-radius:100%;
float:left;
}
Da unsere Liebe aus zwei Kreisen und einem Quadrat besteht, brauchen wir einen weiteren Kreis.
.disc2{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:250px 0px 0px 0px;
border-radius:100%;
float:left;
position: relative;
right: 50px;
}
[Empfohlen: „CSS-Video-Tutorial“]
Im dritten Schritt müssen wir ein Quadrat erstellen.
.square{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin: 300px 0px 0px 0px;
float: left;
position: relative;
right: 152px;
}
Der Effekt dieser Vorgehensweise ist im Grunde genommen sichtbar, aber wir müssen den Winkel der Liebe noch anpassen. Zu diesem Zeitpunkt müssen wir das Rotationsattribut in der Transformation in unserem CSS-Stil verwenden.
Da wir alle drei ps um den Winkel drehen müssen, setzen wir diese drei ps in ein p. Der spezifische Code lautet wie folgt:
.main{
transform: rotate(45deg);
margin: 300px;
}
Inzwischen ist unsere Liebe geschlossen. Die Darstellung ist wie folgt:
Alle Codes sind wie folgt (einschließlich HTML-Code und CSS-Code)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="css/square.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="main">
<div class="disc1"></div>
<div class="disc2"></div>
<div class="square"></div>
</div>
</body>
</html>*{
margin: 0px;
padding: 0px;
}
.main{
transform: rotate(45deg);
margin: 300px;
}
.disc1{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:300px 0px 0px 300px;
border-radius:100%;
float:left;
}
.disc2{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:250px 0px 0px 0px;
border-radius:100%;
float:left;
position: relative;
right: 50px;
}
.square{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin: 300px 0px 0px 0px;
float: left;
position: relative;
right: 152px;
}
Das obige ist der detaillierte Inhalt vonWie man mit CSS ein rotes Herz erstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!