Heim > Artikel > Web-Frontend > CSS zeichnet ein rotes Herz

CSS zeichnet ein rotes Herz

php中世界最好的语言Original: 2018-03-22 11:14:092418Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS3, um einen animierten Fahrradeffekt zu erzielenNächster Artikel：CSS3, um einen animierten Fahrradeffekt zu erzielen

In Verbindung stehende Artikel

Mehr sehen