suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie zeichne ich ein schlagendes Herz mit reinem CSS (Codebeispiel)?

Wie zeichne ich ein schlagendes Herz mit reinem CSS (Codebeispiel)?

青灯夜游
青灯夜游Original
2018-09-13 16:42:512579Durchsuche

In diesem Kapitel erfahren Sie, wie Sie mit reinem CSS ein schlagendes Herz zeichnen. (Codebeispiel) hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Lassen Sie mich zunächst die Darstellungen zeigen:

Wie zeichne ich ein schlagendes Herz mit reinem CSS (Codebeispiel)?

Prinzip der Umsetzung:

1. Dieses Herz kann in zwei Teile geteilt werden, zwei Rechtecke;

Wie zeichne ich ein schlagendes Herz mit reinem CSS (Codebeispiel)?

Setzen Sie den Randradius entsprechend ein (), der festgelegte Wert von „Rotate()“ sollte entgegengesetzt sein, ein positiver Wert und ein negativer Wert. Wenn der linke Wert von einem von ihnen festgelegt wird, wird er zu

Wie zeichne ich ein schlagendes Herz mit reinem CSS (Codebeispiel)?

Um dreidimensional auszusehen, können Sie den Box-Schatten auf der linken Seite festlegen.

Dann verwenden Sie @keyframes und Transformationsattribute, um einen Sprungeffekt zu erzielen . Wie zeichne ich ein schlagendes Herz mit reinem CSS (Codebeispiel)?

Codebeispiel: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>纯css画一下心</title>
		<style>
			body{
                height: 100%;
                margin: 0;
            }
            .demo{
                width: 1px;
                height: 1px;
                margin: 300px auto;
                position: relative;
                animation: tiaodong .8s linear infinite;
            }
            .demo::before,.demo::after{
                content: &#39;&#39;;
                position: absolute;
                width: 80px;
                height: 120px;
                background-color: red;
                border-radius: 50px 50px 0 0;
            }
           .demo::after{
                left: 28px;
                transform: rotate(45deg);
            }
             .demo::before{
                transform: rotate(-45deg);
                box-shadow: -5px -5px 10px grey;
            }
            @keyframes tiaodong{
                0%{
                    transform: scale(1);
                }
                50%{
                    transform: scale(1.05);
                }
                100%{
                    transform: scale(1);
                }
            }
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

wird unter Verwendung von After- und Before-Pseudoelementen ohne Berücksichtigung der Kompatibilität implementiert und kann nicht vor IE 10 angezeigt werden. Wie zeichne ich ein schlagendes Herz mit reinem CSS (Codebeispiel)?

Kann durch Ersetzen von after und before durch span-Elemente gelöst werden.

Muss hinzugefügt werden: -ms-transform.


Wenn Sie mit dem Span-Element zeichnen, müssen Sie das Z-Index-Attribut im rechten Block festlegen.

Das obige ist der detaillierte Inhalt vonWie zeichne ich ein schlagendes Herz mit reinem CSS (Codebeispiel)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css border 伪元素 transform
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：Wie erzwinge ich mit „word-break:break-all“ eine neue Zeile?Nächster Artikel：Wie erzwinge ich mit „word-break:break-all“ eine neue Zeile?

In Verbindung stehende Artikel

Mehr sehen