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