So erreichen Sie eine Herzform in CSS-CSS-Tutorial-php.cn

So erreichen Sie eine Herzform in CSS

青灯夜游

Freigeben： 2023-01-07 11:45:06

Original

5099 Leute haben es durchsucht

So implementieren Sie eine Herzform in CSS: Zeichnen Sie zunächst mit dem Stil „border-radius:100%“ zwei perfekte Kreise; positionieren Sie sie dann so, dass sie die beiden Kreise teilweise überlappen, positionieren Sie sie und richten Sie sie aus Das Quadrat mit den beiden Kreisen überlappt sich teilweise, um eine geneigte Herzform zu bilden. Verwenden Sie schließlich den Transformationsstil, um den Winkel des Herzens anzupassen.

So erreichen Sie eine Herzform in CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Vorkenntnisse:

Verstehen, wie man ein Quadrat zeichnet.
Verstehen Sie, wie man einen Kreis zeichnet.
Verstehen Sie, was Positionierung ist.
Verstehen Sie, wie man rotiert.

Ohne weitere Umschweife möchte ich Ihnen zunächst beibringen, wie man mit CSS einen Kreis zeichnet.

.disc1{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:300px 0px 0px 300px;
    border-radius:100%;
    float:left;
}

Nach dem Login kopieren

So erreichen Sie eine Herzform in CSS

Da unser Herz 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;
}

Nach dem Login kopieren

So erreichen Sie eine Herzform in CSS

Im dritten Schritt müssen wir ein Quadrat machen.

.square{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin: 300px 0px 0px 0px;
    float: left;
    position: relative;
    right: 152px;
}

Nach dem Login kopieren

2-So erreichen Sie eine Herzform in CSS

Danach ist der Effekt im Grunde genommen sichtbar, aber wir müssen noch den Winkel der Liebe anpassen. Zu diesem Zeitpunkt müssen wir das Rotationsattribut in der Transformation in unserem CSS-Stil verwenden.

Da wir alle drei Divs rotieren müssen, fügen wir diese drei Divs in ein Div ein. Der spezifische Code lautet wie folgt:

.main{
    transform: rotate(45deg);
    margin: 300px;
}

Nach dem Login kopieren

Inzwischen ist unsere Liebe gemacht. Das Rendering ist wie folgt:

So erreichen Sie eine Herzform in CSS

Alle Codes lauten wie folgt (einschließlich HTML-Code und CSS-Code)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
			*{
			    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;
			}
		</style>
    </head>
    <body>
        <div class="main">
            <div class="disc1"></div>
            <div class="disc2"></div>
            <div class="square"></div>
        </div>
    </body>
</html>

Nach dem Login kopieren

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine Herzform in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!