So verwenden Sie CSS, um die gemeinsame Nutzung von Beispielcode zum Zeichnen von Herzen zu implementieren-CSS-Tutorial-php.cn

So verwenden Sie CSS, um die gemeinsame Nutzung von Beispielcode zum Zeichnen von Herzen zu implementieren

黄舟

Freigeben： 2017-06-01 10:43:48

Original

3777 Leute haben es durchsucht

Heute wird Xiaoying mit Ihnen ein mit CSS gezeichnetes Herz teilen. Ich hoffe, dass es für alle hilfreich ist.

Schritt 1:

Zeichnen Sie zuerst ein Quadrat. Wie im Bild gezeigt:

So verwenden Sie CSS, um die gemeinsame Nutzung von Beispielcode zum Zeichnen von Herzen zu implementieren

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css画桃心</title>
    <style media="screen">
        .heart-body {
            width: 500px;
            margin: 100px auto;
            position: relative;
        }
        .heart-shape {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #f70e0e;
        }
    </style>
</head>
<body>
    <p class="heart-body">
        <p class="heart-shape"></p>
    </p>
</body>
</html>

Nach dem Login kopieren

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:

So verwenden Sie CSS, um die gemeinsame Nutzung von Beispielcode zum Zeichnen von Herzen zu implementieren

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

Nach dem Login kopieren

Randradius verwenden: 50 %; Attribute:

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

Nach dem Login kopieren

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:

So verwenden Sie CSS, um die gemeinsame Nutzung von Beispielcode zum Zeichnen von Herzen zu implementieren

.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);
        }

Nach dem Login kopieren

Xiaoying hat der Hintergrundfarbe des Kreises und der Hintergrundfarbe des Quadrats nicht die gleiche Farbe gegeben, damit jeder sie sehen kann Der offensichtliche Effekt ist besser. Als nächstes stellt Xiaoying die Hintergrundfarbe einheitlich ein und die endgültige Liebe kommt zum Vorschein, wie im Bild gezeigt:

So verwenden Sie CSS, um die gemeinsame Nutzung von Beispielcode zum Zeichnen von Herzen zu implementieren

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um die gemeinsame Nutzung von Beispielcode zum Zeichnen von Herzen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!