下面是一个逐步拆解教程，带你手把手复刻这个 跳动的爱心动画。你将学到如何通过 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%：回到原状态，准备下一轮
这个节奏让爱心 “砰砰跳动”，形成有生命感的效果。
✅ 最终效果预览
- 页面背景是深灰色。
- 屏幕正中央有一个粉红色爱心。
- 爱心以一定节奏不断跳动，大小变换显得非常有律动感。
🧪 可选拓展
调整颜色
background-color: hotpink; /* 更少女心风格 */添加阴影
box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);加个“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 |
完成节奏控制与循环跳动 |