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:
Prinzip der Umsetzung:
1. Dieses Herz kann in zwei Teile geteilt werden, zwei Rechtecke;
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
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 .
Codebeispiel:
? "153682704622315Wie zeichne ich ein schlagendes Herz mit reinem CSS (Codebeispiel)?")
? "153682738011893Wie zeichne ich ein schlagendes Herz mit reinem CSS (Codebeispiel)?")
? "153682774316128Wie zeichne ich ein schlagendes Herz mit reinem CSS (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: '';
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.
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!
? "153682780259903Wie zeichne ich ein schlagendes Herz mit reinem CSS (Codebeispiel)?")
