持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情
首先，经过仔细的观察，我发现，只要拿三个正方行其实就可以拼出这么一个爱心了。如下图：
也就是两个圆＋一个方形，而两个圆我们只要两个方块搞个圆角就OK了，上代码：
<style> body { background-color: skyblue; } .heart { width: 220px; height: 200px; margin: 100px auto; /* 暂时为了看到 heart 的位置 */ background: #fff; /* 用于里面盒子相对于父元素定位 */ position: relative; } .left, .right, .bottom { width: 125px; height: 125px; background-color: red; /* 定位 */ position: absolute; } .left { left: 0; border-radius: 50%; } .right { right: 0; border-radius: 50%; } .bottom { /* 绝对定位元素水平居中 */ left: 0; right: 0; margin: 46px auto; /* 也可以用下面这种方式水平居中，至于距离上面的高度是调着摆的 left: 50%; transform: translateX(-50%); margin-top: 46px; */ } </style></head><body> <div class="heart"> <div class="left"></div> <div class="right"></div> <div class="bottom"></div> </div></body></html>
到这里发现我们发现自己已经成功了一半：
咳咳，半个骨头已经画好了，剩下的半个交给你了……🤭
接下来，我们发现只要讲下面的元素旋转45°就好了
.bottom { transform: rotateZ(45deg);}
现在基本上的形状就已经好了，我能可以把大盒子白色的背景去掉了。
那么剩下的，我们只要，给它加上阴影和让它跳起来就好了。
先给它加上阴影：
.left, .right, .bottom { box-shadow: 0 0 20px red;}
然后让它动起来：
.heart { animation: beat 1s ease-in infinite alternate;}@keyframes beat { from { transform: scale(1); } to { transform: scale(1.1); }}
到这里你的心已经可以跳了，是不是有一点激动🤩
