运用CSS制作红心跳动动画

---

前言

运用两个矩形，将其上部设置为圆，将两个矩形旋转再调整其位置，而后制作出一个红心，再运用动画帧为其制作动画效果

---

一、涉及的知识点

/* keyframes为关键帧，beat是帧的名称，方面寻找 */
@keyframes beat{
				30%{transform:scale(1.3);}
				100%{transform:scale(1);}
			}
/*当在30%这个节点的时候，元素放大为原来的1.3倍，处在100%节点的时候，元素恢复正常*/

/*为元素施加动画*/
.heart{
				animation:beat 1.5s infinite;
			}
/*animation: 动画名称 动画时长 动画无限循环*/

二、操作步骤

1.写出两个矩形，并调整其方向位置

代码如下（示例）：

<span class="heart">
			<span class="heart-left"></span>
			<span class="heart-right"></span>
		</span>

body{
			padding:100px;
		}
			span{
				display:inline-block;
			}
			.heart-left,.heart-right{
				width:50px;
				height:80px;
				background-color: red;
				border-top-left-radius:25px;
				border-top-right-radius:25px;
			}
			.heart-left{
				transform:rotateZ(-45deg);
			}
			.heart-right{
				transform:translateX(-33px) rotateZ(45deg);
			}

效果展示：

2.为红心添加跳动效果

代码如下（示例）：

.heart{
				animation:beat 1.5s infinite;
			}
@keyframes beat{
				30%{transform:scale(1.3);}
				100%{transform:scale(1);}
			}

效果展示：红心不断跳动，即放大后又恢复正常

---