CSS zeichnet ein rotes Herz

Dieses Mal bringe ich Ihnen CSS zum Zeichnen eines roten Herzens. Was sind die Vorsichtsmaßnahmen zum Zeichnen eines roten Herzens mit CSS?

Schritt 1:

Zeichnen Sie zuerst ein Quadrat. Wie im Bild gezeigt:

nbsp;html>


    <meta>
    <title>css画桃心</title>
    <style>
        .heart-body {
            width: 500px;
            margin: 100px auto;
            position: relative;
        }
        .heart-shape {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #f70e0e;
        }
    </style>


    <p>
        </p><p></p>
    

Der zweite Schritt:

verwendet Pseudoelemente Zeichnen Sie vorher und nachher ein Quadrat auf der linken und oberen Seite des Quadrats und ändern Sie dann die beiden Quadrate mit dem Attribut border-radius: 50%. Anschließend erhalten Sie zwei Kreise, wie im Bild gezeigt:

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: '';
            width: 100px;
            height: 100px;
            background-color: #ffc0cb;
        }
        .heart-shape:before {
            left: -45px;
        }
        .heart-shape:after {
            top: -45px;
        }

Use border-radius: 50%; Attribut:

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: '';
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            /**兼容苹果；谷歌，等一些浏览器认*/
            -moz-border-radius: 50%;
            /**兼容火狐浏览器*/
            -o-border-radius: 50%;
            /**兼容opera浏览器*/
            border-radius: 50%;
            background-color: #ffc0cb;
        }

Schritt 3:

P mit Klassenname: heart-shape Verwenden Sie das Attribut „transform: rotation(45deg);“, um sie um 45 Grad zu drehen, wie in der Abbildung gezeigt:

.heart-shape {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #f70e0e;
            -webkit-transform: rotate(45deg);
            /* Safari 和 Chrome */
            -moz-transform: rotate(45deg);
            /* Firefox */
            -ms-transform: rotate(45deg);
            /* IE 9 */
            -o-transform: rotate(45deg);
            /* Opera */
            transform: rotate(45deg);
        }

Xiaoying hat der Hintergrundfarbe des Kreises und der Hintergrundfarbe des Quadrats keine einheitliche Farbe gegeben, damit jeder den offensichtlichen Effekt besser erkennen kann. Als nächstes legt Xiaoying den Hintergrund fest In die Einheit kommt die endgültige Liebe, wie im Bild gezeigt:

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: '';
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            /**兼容苹果；谷歌，等一些浏览器认*/
            -moz-border-radius: 50%;
            /**兼容火狐浏览器*/
            -o-border-radius: 50%;
            /**兼容opera浏览器*/
            border-radius: 50%;
            background-color: #f70e0e;
        }

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben . Bitte achten Sie auf weitere spannende Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung des CSS3-Mehrklassenselektors

Detaillierte Erläuterung der Verwendung von CSS-Hintergrundanhang

Preisliste für Bootstrap-Implementierung

Das obige ist der detaillierte Inhalt vonCSS zeichnet ein rotes Herz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!