爱心网页代码 - HTML爱心动画制作教程 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>爱心网页</title>
	<style>
		body{
			background-color: #F5F5F5;
		}
		.heart{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 100px;
			height: 100px;
			background-color: red;
			border-radius: 50% 50% 0 0;
			transform: rotate(-45deg);
			animation: heartbeat 1s ease-in-out infinite;
		}
		.heart:after,
		.heart:before{
			position: absolute;
			content: "";
			left: 0px;
			top: 0px;
			width: 100px;
			height: 100px;
			background-color: red;
			border-radius: 50%;
		}
		.heart:before{
			transform: translate(-50%,-50%) rotate(-45deg);
		}
		.heart:after{
			transform: translate(-50%,-50%) rotate(45deg);
		}
		@keyframes heartbeat{
			0%{
				transform: scale(1);
			}
			50%{
				transform: scale(1.1);
			}
			100%{
				transform: scale(1);
			}
		}
		h1{
			position: absolute;
			top: 70%;
			left: 50%;
			transform: translate(-50%,-50%);
			color: #333;
			font-size: 40px;
			font-family: Arial, sans-serif;
		}
	</style>
</head>
<body>
	<div class='heart'></div>
	<h1>爱你</h1>
</body>
</html>