用CSS画爱心并让它心动

CSS部分

* {
			padding: 0;
			margin: 0;
		}
		.box {
			width: 300px;
			height: 300px;
			background-color: red;
			margin: 200px auto;
			/* 整体旋转45度  缩小*/
			transform: rotate(45deg) scale(.5);
			/* 使用动画 动画时长3秒 重复执行 */
			animation: xd 3s infinite;
		}
		/* 定义心动动画 */
		@keyframes xd {
			25% {
				transform: rotate(45deg) scale(1);
			}
			50% {
				transform: rotate(45deg) scale(.5);
			}
			75% {
				transform: rotate(45deg) scale(1);
			}
			100% {
				transform: rotate(45deg) scale(.5);
			}
		}
		/* 在盒子最前添加一个元素 */
		.box::before {
			content: '';
			width: 300px;
			height: 300px;
			border-radius: 50%;
			position: absolute;
			background-color: red;
			transform: translate(-150px);
		}
		/* 在盒子最后添加一个元素 */
		.box::after {
			content: '';
			width: 300px;
			height: 300px;
			border-radius: 50%;
			position: absolute;
			background-color: red;
			transform: translateY(-150px);
		}

HTML部分

<div class="box"></div>