css3画一个跳动的心

最新推荐文章于 2022-11-21 20:17:55 发布

王小花__

最新推荐文章于 2022-11-21 20:17:55 发布

阅读量498

点赞数

本文链接：https://blog.csdn.net/qq_26516509/article/details/77461202

版权

使用css3画一颗跳动的心

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			background: #000;
		}
		.heart{
			width: 100px;
			height: 100px;
			background: red;
			margin:100px auto 0;
			position: relative;
			transform: rotate(-45deg);
			animation: putongputong 2s infinite;
		}
		.heart:after{
			display: block;
			content: '';
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background: red;
			position: absolute;
			top: -50px;
			left: 0;
		}
		.heart:before{
			display: block;
			content: '';
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background: red;
			position: absolute;
			right: -50px;
			top: 0;
		}
		@keyframes putongputong{
			0%{
				transform: rotate(-45deg) scale(0.8);
			}
			50%{
				transform: rotate(-45deg) scale(1.2);
			}
			100%{
				transform: rotate(-45deg) scale(0.8);
			}
		}
	</style>
</head>
<body>
	<div class="heart"></div>
</body>
</html>