suchen

Heim  >  Artikel  >  Web-Frontend  >  Lernen Sie anhand interessanter und lebendiger Bilder, wie man mit reinem CSS ein Herz zeichnet! !

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

青灯夜游
青灯夜游nach vorne
2021-04-30 10:15:142198Durchsuche

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:

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>

2. Fügen Sie hier Pseudoklassen hinzu, um sie zu implementieren 
#heart{
       height: 300px;
       width: 300px;
       border: 2px solid black;
    }

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;  // 向左位移正方形一半的长度
    }

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!

Stellungnahme：
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：So positionieren Sie CSSNächster Artikel：So positionieren Sie CSS

In Verbindung stehende Artikel

Mehr sehen