前端萌新别慌：用 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>
代码超简单讲解（萌新友好版）
快速自定义（表白专属改法）
- 改颜色：把 #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（注意用户体验）。
保存运行方法
现在就去试试吧！做完后截图发给喜欢的人，保证对方会心动～
想要带粒子飘落、点击心碎裂、3D 旋转心、响应式情人节卡片完整版，或者把这个心做成微信小程序/网页情书，随时告诉我，我继续给你升级代码！
快去表白吧，前端萌新也能做出超浪漫的神器！❤️🚀
