思路：利用两个长方形(比例是2:3 | 3:2)可以合成心形，然后利用动画，缩放大小实现心跳（纯代码），效果如下：
<body> <div></div> </body>
div{ margin: 200px; width: 200px;/* 盒子1宽高是2：3 */ height: 300px; background: rgb(218, 9, 9); position: relative; border-radius: 100px 100px 0 0;/* 左上，右上变圆角 */ transform: rotate(-45deg);/* 逆时针旋转45deg放正 */ animation: heartbeat 1s ease 0s infinite normal;/* 调用heart动画 */ } div::after{ content: ""; display: block; width: 300px; height: 200px; background: rgb(218, 9, 9); position: absolute; bottom: 0; left: 0;/* 添加一个盒子，宽高是3:2，然后定位在下面，颜色一样， */ border-radius: 0 100px 100px 0 ;/* 右上，右下变圆角 */ } @keyframes heartbeat { /* 声明一个名称为heart的动画 */ 0%{ transform: scale(1) rotate(-45deg);/* 注意，前面使用了旋转，这里必须写上，不然会重叠效果 */ } 50%{ transform: scale(1.2) rotate(-45deg); } 100%{ transform: scale(1) rotate(-45deg); } }
当然也有其他的方法制作心形，比如：两个圆 + 正方形，可以看另外一篇园友的文章：心跳 CSS