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

电子商务网站策划书网络营销网站

wzjs 2025/7/29 23:27:22

电子商务网站策划书,网络营销网站,网站开发收费标准文档,做网站需要租服务器么下面是一个逐步拆解教程，带你手把手复刻这个跳动的爱心动画。你将学到如何通过 CSS 画出一个心形，并配合 keyframes 实现心跳效果。 🎯 效果简介页面背景为深灰色。页面中央显示一个粉红色爱心图案。爱心随着节奏跳动（缩放放…

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