Codebeispiel für die Verwendung von CSS zum Zeichnen eines Herzens-CSS-Tutorial-php.cn

Codebeispiel für die Verwendung von CSS zum Zeichnen eines Herzens

巴扎黑

Freigeben： 2017-03-14 10:32:30

Original

5374 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:

Codebeispiel für die Verwendung von CSS zum Zeichnen eines Herzens

<!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

Schritt 2:

Verwenden Sie die Pseudoelemente before und :after, um ein Quadrat links und oben im Quadrat zu zeichnen, und verwenden Sie dann border-radius: 50 % ;Attribut , ändern Sie diese beiden Quadrate und erhalten Sie dann zwei Kreise, wie im Bild gezeigt:

Codebeispiel für die Verwendung von CSS zum Zeichnen eines Herzens

.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:rotate(45deg);, um sie um 45 Grad zu drehen, wie in der Abbildung gezeigt:

Codebeispiel für die Verwendung von CSS zum Zeichnen eines Herzens

.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 das besser sehen kann Beim offensichtlichen Rendern stellt Xiaoying dann die Hintergrundfarbe einheitlich ein und die endgültige Liebe kommt zum Vorschein, wie im Bild gezeigt:

Codebeispiel für die Verwendung von CSS zum Zeichnen eines Herzens

.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 eine detaillierte Erklärung des vom Herausgeber eingeführten Prozesses zum Zeichnen von Herzen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht Ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der Script House-Website bedanken!

Das obige ist der detaillierte Inhalt vonCodebeispiel für die Verwendung von CSS zum Zeichnen eines Herzens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!