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

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


🎯 效果简介

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

🧱 第 0 步:项目结构

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

🔤 第 1 步:HTML 结构

打开 index.html,内容非常简单:

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 中,先设置全屏背景和居中布局:

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

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

接下来看 .coracao 这个类:

css 复制代码
.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 步:添加圆形伪元素

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

css 复制代码
.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 步:定义心跳动画

接下来是最有趣的部分:心跳效果!

css 复制代码
@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. 调整颜色

    css 复制代码
    background-color: hotpink; /* 更少女心风格 */
  2. 添加阴影

    css 复制代码
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
  3. 加个"LOVE"文字

    html 复制代码
    <div class="coracao">
      <div class="texto">LOVE</div>
    </div>

    然后在 CSS 里:

    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 完成节奏控制与循环跳动
相关推荐
慧一居士43 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead1 小时前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app