HTML爱心代码 - 用代码画一个跳动的心 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>爱心</title>
	<meta charset="UTF-8">
	<style>
		body {
			background-color: #F5F5F5;
		}
<pre><code>	.heart {
		position: relative;
		width: 100px;
		height: 90px;
		margin: 50px auto;
		transform: rotate(-45deg);
		animation: beat 1s infinite;
	}

	.heart:before,
	.heart:after {
		content: &quot;&quot;;
		position: absolute;
		top: 0;
		left: 50px;
		width: 50px;
		height: 80px;
		background-color: #FFC0CB;
		border-radius: 50px 50px 0 0;
		transform: rotate(-45deg);
	}

	.heart:before {
		border-radius: 0 50px 0 0;
		left: 0;
	}

	.heart:after {
		border-radius: 50px 0 0 0;
		left: -50px;
	}

	@keyframes beat {
		0% {
			transform: scale(1);
		}
		50% {
			transform: scale(0.8);
		}
		100% {
			transform: scale(1);
		}
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div class="heart"></div>
</body>
</html>