利用 html 和 css 可以实现一个心脏，使用 css 动画效果就可以使心脏跳动起来，整个效果图如下：
使用两个圆形 div 和一个矩形 div 就能拼接成一个心脏，以下附上完整的源代码（其中 audio 标签中引入 img 文件夹下的 heart.wav 音频文件，可到网上自行下载）：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>跳动的心脏</title>
<style>
body{
background-color: #FFA5A5;
}
.hrt{
width: 200px;
height: 200px;
background-color: #d5093c;
box-shadow: 0 0 70px #d5093c;
animation: sport 1s infinite;
}
.lef{
border-radius: 100px;
position: absolute;
top: 200px;
left: 200px;
}
.rig{
border-radius: 100px;
position: absolute;
top: 200px;
left: 341px;
}
.cen{
transform: rotate(45deg);
position: absolute;
top: 269px;
left: 271px;
}
@keyframes sport {
0%{
transform: scale(1) rotate(45deg);}
50%{
transform: scale(1.1) rotate(45deg);}
100%{
transform: scale(1) rotate(45deg);}
}
</style>
</head>
<body>
<div class="hrt lef"></div>
<div class="hrt cen"></div>
<div class="hrt rig"></div>
<!--心脏跳动声-->
<audio src="img/heart.wav" autoplay="autoplay" loop="loop"></audio>
</body>
</html>
Tips：自动加载音频文件的时候，开始如果没声音的话，多刷新几次即可。