CSS zeichnet ein rotes Herz-CSS-Tutorial-php.cn

CSS zeichnet ein rotes Herz

php中世界最好的语言

Freigeben： 2018-03-22 11:14:09

Original

2530 Leute haben es durchsucht

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:

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

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

Nach dem Login kopieren

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

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:

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

Nach dem Login kopieren

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!