【开源宝藏】30天学会CSS - DAY8 第八课 跳动的爱心动画

下面是一个逐步拆解教程 ，带你手把手复刻这个 跳动的爱心动画 。你将学到如何通过 CSS 画出一个心形，并配合 @keyframes 实现心跳效果。

---

🎯 效果简介

• 页面背景为深灰色。
• 页面中央显示一个粉红色爱心图案。
• 爱心随着节奏跳动（缩放 + 放大）。

---

🧱 第 0 步：项目结构

heart-beat-animation/
├── index.html     # HTML 文件，定义结构
└── style.css      # CSS 文件，控制样式与动画

---

🔤 第 1 步：HTML 结构

打开 index.html，内容非常简单：

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Coração</title> <!-- 葡萄牙语：心脏/爱心 -->
</head>
<body>
    <div class="coracao"></div> <!-- 一个 div 就是爱心 -->
</body>
</html>

✅ 说明：

• <div class="coracao"></div>：整个爱心动画就是靠这一个 div 完成的。
• 后续我们会用 ::before 和 ::after 做出两个圆，与主方块合并成一个"心形"。

---

🎨 第 2 步：页面背景与居中

在 style.css 中，先设置全屏背景和居中布局：

body {
    height: 100vh;                     /* 让 body 高度占满整个视口 */
    display: flex;
    justify-content: center;          /* 水平居中 */
    align-items: center;              /* 垂直居中 */
    font-family: 'Lato', sans-serif;  /* 可选字体 */
    background-color: #262626;        /* 深灰背景 */
}

---

❤️ 第 3 步：构造心形图案

接下来看 .coracao 这个类：

.coracao {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: rgb(247, 72, 72);  /* 红色主心块 */
    transform: rotate(45deg);            /* 旋转出心形倾角 */
    animation: batidao 1.4s linear infinite; /* 执行跳动动画 */
}

🧠 原理

• 一个方块 100x100px，填充红色。
• 旋转 45 度后就变成了一个"菱形"。
• 后面会用 ::before 和 ::after 添加两个圆形，分别贴在左上和右上。
• 三者合体就是一个心形图案。

---

💡 第 4 步：添加圆形伪元素

这是关键 ------ 用两个伪元素完成心形的"上两个圆"。

.coracao::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(247, 72, 72);
    transform: translateY(-50%);
    border-radius: 50%;
}

.coracao::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(247, 72, 72);
    transform: translateX(-50%);
    border-radius: 50%;
}

🔍 解析

• .coracao::before
  • 向上移动 50%，形成左上角的半圆。
• .coracao::after
  • 向左移动 50%，形成右上角的半圆。
• 二者分别是一个完整圆，但我们只露出一半，使它们和主方块组合起来看起来像一个 ❤️。

---

💓 第 5 步：定义心跳动画

接下来是最有趣的部分：心跳效果！

@keyframes batidao {
    0%   { transform: rotate(45deg) scale(1); }
    25%  { transform: rotate(45deg) scale(1); }
    30%  { transform: rotate(45deg) scale(1.4); }
    50%  { transform: rotate(45deg) scale(1.2); }
    70%  { transform: rotate(45deg) scale(1.4); }
    100% { transform: rotate(45deg) scale(1); }
}

❤️ 心跳节奏说明：

• 0% → 25%：保持不动（收缩）
• 30%：快速放大（跳一下）
• 50%：稍微缩回一点点
• 70%：再次跳起
• 100%：回到原状态，准备下一轮

这个节奏让爱心 "砰砰跳动"，形成有生命感的效果。

---

✅ 最终效果预览

• 页面背景是深灰色。
• 屏幕正中央有一个粉红色爱心。
• 爱心以一定节奏不断跳动，大小变换显得非常有律动感。

---

🧪 可选拓展

1. 调整颜色

   background-color: hotpink; /* 更少女心风格 */

2. 添加阴影

   box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);

3. 加个"LOVE"文字

   <div class="coracao">
     <div class="texto">LOVE</div>
   </div>

   然后在 CSS 里：

   .coracao .texto {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%) rotate(-45deg);
       color: white;
       font-weight: bold;
       z-index: 1000;
   }

---

📌 总结

技术点	用法说明
::before/after	制作半圆补足爱心上半部分
transform: rotate	旋转主方块成心形基本形状
scale()	缩放模拟跳动感
animation + @keyframes	完成节奏控制与循环跳动