前端萌新别慌：用 HTML + CSS 画个会跳动的心 ❤️ 表白神器 5 分钟速成！
今天教你纯 HTML + CSS 实现一个会跳动的心，超级简单、可爱，还能直接复制到你的表白网页、情人节卡片或微信小程序里。效果就是：一颗红心不断放大缩小，像真的在“怦怦”跳动～
最终效果预览（动图演示）
（上面就是实际运行的效果：心会持续温柔地跳动）
完整代码（直接复制就能用）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跳动的心 ❤️</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #ffebee, #ffcdd2); /* 粉嫩背景 */
overflow: hidden;
}
.heart {
position: relative;
width: 120px;
height: 110px;
animation: heartbeat 1.2s infinite ease-in-out; /* 跳动动画 */
}
.heart::before,
.heart::after {
content: '';
position: absolute;
top: 0;
width: 60px;
height: 95px;
background: #ff1744; /* 鲜艳的红心颜色 */
border-radius: 50px 50px 0 0;
}
.heart::before {
left: 0;
transform: rotate(-45deg);
transform-origin: 100% 100%;
}
.heart::after {
right: 0;
transform: rotate(45deg);
transform-origin: 0 100%;
}
/* 跳动关键帧动画 */
@keyframes heartbeat {
0% { transform: scale(1); }
14% { transform: scale(1.3); }
28% { transform: scale(1); }
42% { transform: scale(1.3); }
70% { transform: scale(1); }
100% { transform: scale(1); }
}
/* 可选：鼠标悬停时心更大更亮 */
.heart:hover {
animation-duration: 0.6s; /* 悬停时跳得更快 */
filter: brightness(1.2);
}
/* 文字提示 */
.text {
position: absolute;
bottom: 80px;
font-size: 28px;
color: #d81b60;
font-family: "Microsoft YaHei", sans-serif;
text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="heart"></div>
<div class="text">我喜欢你 ❤️</div>
</body>
</html>
代码超简单讲解（萌新友好版）
- .heart：用两个半圆（::before 和 ::after）拼成爱心，这是 CSS 画心最经典的方式。
- border-radius：把矩形两端变圆，变成心形上半部分。
- transform: rotate()：一个向左转，一个向右转，拼出完整心形。
- @keyframes heartbeat：定义跳动过程——先放大 1.3 倍，再缩小，循环播放。
- animation：让动画无限循环（infinite），每次 1.2 秒，节奏像心跳。
快速自定义（表白专属改法）
- 改颜色：把
#ff1744换成你喜欢的颜色（粉色#ff4081、紫色#9c27b0都好看）。 - 改大小：改
.heart的width和height。 - 改跳动速度：改
animation: heartbeat 1.2s里的 1.2s（越小跳得越快）。 - 加文字：把
<div class="text">我喜欢你 ❤️</div>改成你的情话。 - 加名字：比如
<div class="text">送给 小可爱 ❤️</div>。
进阶小技巧（想更炫就试试）
- 加发光：给
.heart加box-shadow: 0 0 30px #ff1744; - 多个心一起跳：复制几个
.heart并设置不同延迟animation-delay。 - 响应式：把
width: 120px改成width: 15vw;让它随屏幕大小变化。 - 配音乐：加
<audio autoplay loop>放一首温柔 BGM（注意用户体验）。
保存运行方法
- 把上面代码全部复制。
- 新建一个文件，命名为
heart.html。 - 粘贴保存，双击打开浏览器就看到跳动的心啦！
现在就去试试吧！做完后截图发给喜欢的人，保证对方会心动～
想要带粒子飘落、点击心碎裂、3D 旋转心、响应式情人节卡片完整版，或者把这个心做成微信小程序/网页情书，随时告诉我，我继续给你升级代码！
快去表白吧，前端萌新也能做出超浪漫的神器！❤️🚀
