用 CSS 制作跳动的心形：入门教程

今年情人节你是不是忘了？你可能不是唯一一个。你可以像个拖延症患者一样，临时抱佛脚地给你的另一半买些巧克力或鲜花。或者，你也可以快速制作一些简单却能让对方觉得“哇，我爱上了一个如此贴心的天才”的小礼物。比如：用 CSS 制作的跳动的心形动画。

CSS 艺术可能很复杂，令人望而生畏，但这个简单教程的基础只是几个形状：一个正方形和两个圆形。

我们首先div在 HTML 中创建一个元素。我给我的元素添加了一个心形类，这样就能更清楚地表明我们正在制作的就是这个（如果我们不在情人节送礼物给爱人，我们可能会打破这个心形）。

<div class="heart"></div>

让我们确保这个心形元素在页面上居中。在 CSS 中，将 body（心形元素的容器）设置为居中，并使用 `center` 和` display: flexcenter` 属性将其中的内容居中。justify-contentalign-items

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

接下来，我们给它div上色并调整尺寸。我选择了经典的红色，并将高度和宽度都设置为 100 像素。无论你把心形画多大，它的高度和宽度都应该相等，这样最终会得到一个正方形。将这个正方形旋转 -45 度，就能得到心形的尖角。

.heart {
    height: 100px;
    width: 100px;
    background-color: red;
    transform: rotate(-45deg);
    position: relative;
}

为了创建构成心形顶部的圆形，我们使用 `<div>`::before和::after`<div>` 伪元素生成两个新形状。将它们的高度、宽度和颜色设置为与原始元素相同，并将它们的透明度设置为border-radius50%，使它们变成圆形。将它们的定位设置为绝对定位。

.heart::before, 
.heart::after {
    content: "";
    height: 100px;
    width: 100px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
}

现在我们有了这些圆，需要将它们移动到合适的位置来组成一个心形。将.heart::before伪元素向上移动一半，方法是将其顶部偏移 -50 像素（或元素高度的一半.heart::before）。注意，由于原始元素旋转了 -45 度，它会沿对角线向屏幕左上角移动.heart。为了完成心形的绘制，将.heart::after伪元素向右移动一半，方法是将其左侧偏移 50 像素。

.heart::before {
    top: -50px;
    left: 0px;
}

.heart::after {
    left: 50px;
    top: 0px;
}

好戏开场啦：让我们给这个心跳动画做个动作！我们把@keyframes动画命名为“心跳”。动画播放到25%时，心形会放大到原来的1.25倍；播放到45%时，心形会进一步放大。这种大小变化就能做出心跳的效果。记得在属性里设置-45度旋转，transform这样心形在动画播放过程中就不会倾斜。

@keyframes heartbeat {
    0% {
        transform: scale(1)
            rotate(-45deg);
    }

    25% {
        transform: scale(1.25)
            rotate(-45deg);
    }

    45% {
        transform: scale(1.5)
            rotate(-45deg);
    }
} 

最后一步是定义动画的持续时间和迭代次数。回到.heart元素，设置animation属性来指定心跳动画。然后，将持续时间设置为 1 秒，并设置无限循环。

.heart {
    height: 100px;
    width: 100px;
    background-color: red;
    transform: rotate(-45deg);
    position: relative;
    animation: heartbeat 1s infinite;
}

瞧，这就是你的作品：一个CSS心形动画，它会像你的爱情一样（但愿如此）永不停息地跳动。情人节快乐！