在这个教程中，我们将学习如何使用纯CSS创建一个动画爱心效果。这个效果不需要任何JavaScript，完全由CSS的
@keyframes
和
animation
属性实现。我们将使用CSS的伪元素来创建爱心的形状，并通过动画改变其大小和颜色，使其看起来像是在跳动。
准备工作
在开始之前，请确保你的浏览器支持CSS动画。大多数现代浏览器都支持这些特性。
HTML结构
首先，我们需要一个简单的HTML结构来包含我们的CSS爱心动画。
CSS样式
接下来，我们将添加CSS样式来创建爱心。我们将使用
div
元素作为爱心，并通过伪元素来形成爱心的形状。
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.heart {
width: 100px;
height: 90px;
background-color: red;
position: relative;
transform: rotate(-45deg);
animation: beat 1s infinite;
}
.heart:before,
.heart:after {
content: ”;
width: 100px;
height: 140px;
background-color: red;
border-radius: 50px 50px 0 0;
position: absolute;
top: -50px;
}
.heart:after {
left: 50px;
top: -50px;
transform: rotate(-90deg);
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.9) rotate(-45deg);
}
100% {
transform: scale(1) rotate(-45deg);
}
}
代码解释
HTML结构
：我们创建了一个名为
heart
的
div
元素，它将用作爱心的主体。
CSS样式
：
.heart
：这个类定义了爱心的基本形状和动画。
.heart:before
和
.heart:after
：这两个伪元素用于创建爱心的上半部分，通过改变它们的形状和位置来形成完整的爱心。
动画
：
@keyframes beat
定义了一个简单的缩放动画，使爱心看起来像是在跳动。动画在
heart
元素上应用，并通过
animation
属性无限循环。
通过上述步骤，我们已经创建了一个简单的CSS动画爱心效果。你可以根据自己的需求调整颜色、大小和动画参数，以达到你想要的效果。