CSS画个跳动的心

{{ time }}

代码如下

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			background: red;
			margin: 150px auto;
			filter: drop-shadow(0 0 30px red);
			transform: rotate(45deg);
			animation: jump 1s linear infinite;
		}
 
		div:before,div:after{
			width: 200px;
			height: 200px;
			background: red;
			content: "";
			display: block;
			position: relative;
			border-radius: 50%;
		}
 
		div:before{
			left: -100px;
		}

		div:after{
			top: -300px;
		}
 
		@keyframes jump{
			0%{transform: rotate(45deg) scale(.8);}
			100%{transform: rotate(45deg) scale(.8);}
			60%{transform: rotate(45deg) scale(1.2);}
		}
	</style>
</head>
<body>
	<div></div>

如果不考虑是否符合w3c的标准, 用下面的代码也能出来

<style>
	div{
		margin: 150px auto;
		filter: drop-shadow(0 0 30px red);
		transform: rotate(45deg);
		animation: jump 1s linear infinite;
	}

	div:before{
		left: -100px;
	}

	div:after{
		top: -300px;
	}

	div:before,div:after{
		content: "";
		display: block;
		position: relative;
		border-radius: 50%;
	}

	div,div:before,div:after{
		width: 200px;
		height: 200px;
		background: red;
	}

	@keyframes jump{
		0%{transform: rotate(45deg) scale(.8);}
		100%{transform: rotate(45deg) scale(.8);}
		60%{transform: rotate(45deg) scale(1.2);}
	}
</style>
<div></div>