Lernen Sie anhand interessanter und lebendiger Bilder, wie man mit reinem CSS ein Herz zeichnet! !-CSS-Tutorial-php.cn

Lernen Sie anhand interessanter und lebendiger Bilder, wie man mit reinem CSS ein Herz zeichnet! !

青灯夜游

Freigeben： 2021-05-07 09:30:38

nach vorne

2206 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie mit reinem CSS ein Herz zeichnen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Lernen Sie anhand interessanter und lebendiger Bilder, wie man mit reinem CSS ein Herz zeichnet! !

Anforderungen/Funktion:

Wie zeichnet man eine Liebe mit CSS+HTML.

Analyse:

Eine Liebe kann aus einem Quadrat + zwei Kreisen bestehen. (Lernvideo-Teilen: CSS-Video-Tutorial)

1. Zeichnen Sie zuerst ein Quadrat + einen Kreis und platzieren Sie sie wie folgt:

Lernen Sie anhand interessanter und lebendiger Bilder, wie man mit reinem CSS ein Herz zeichnet! !

2. Fügen Sie zum Schluss einen Kreis hinzu die gesamte Grafik 45 Grad im Uhrzeigersinn.

Lernen Sie anhand interessanter und lebendiger Bilder, wie man mit reinem CSS ein Herz zeichnet! !

Erste Implementierung:

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

Nach dem Login kopieren

2. Fügen Sie hier Pseudoklassen hinzu, um sie zu implementieren

#heart{
       height: 300px;
       width: 300px;
       border: 2px solid black;
    }

Nach dem Login kopieren

Die Grafik sieht jetzt so aus: Lernen Sie anhand interessanter und lebendiger Bilder, wie man mit reinem CSS ein Herz zeichnet! !

3. Fügen Sie einen weiteren Kreis hinzu, verwenden Sie hier die After-Pseudoklasse, um ihn zu implementieren.

     #heart{
            height: 200px;
            width: 200px;
            border: 2px solid black;
            position: relative;
        }
    #heart:before{
        content: &#39;&#39;;
        width: 200px;
        height: 200px;
        border: 2px solid black;
        border-radius: 50%; // 正方形加圆角变成圆
        position: absolute;
        left: -100px;  // 向左位移正方形一半的长度
    }

Nach dem Login kopieren

4 Farbe. Entfernen Sie den zuvor hinzugefügten Rand, um klar zu sehen Ersetzen Sie dann die beiden Pseudoklassen und fügen Sie schließlich Farbe hinzu, um ein Herz zu erhalten.

Lernen Sie anhand interessanter und lebendiger Bilder, wie man mit reinem CSS ein Herz zeichnet! ! Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmiervideos

! !

Das obige ist der detaillierte Inhalt vonLernen Sie anhand interessanter und lebendiger Bilder, wie man mit reinem CSS ein Herz zeichnet! !. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!