当前位置：首页 > news >正文

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

news 来源：原创 2025/6/2 0:43:02

下面是一个逐步拆解教程，带你手把手复刻这个 跳动的爱心动画。你将学到如何通过 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`	完成节奏控制与循环跳动