CSS动画:跳动的心

抖音刷到[亿以网络]网课,学起来!


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>跳动的心</title>
<style>
body {
	background: black;
}

.heart {
	margin: 200px auto;
	width: 200px;
	height: 200px;
	animation: beat 1s linear infinite alternate;
}

.heart_left, .heart_right {
	float: left;
	width: 100px;
	height: 160px;
	border-radius:50px 50px 0 0;
	background: hotpink;
	box-shadow: 0 0 30px 0 hotpink;
}

.heart_left {
	transform: translateX(28px) rotate(-45deg);
}

.heart_right {
	transform: translateX(-28px) rotate(45deg);
}

@keyframes beat {
      0% { transform:scale(1); }
	100% { transform:scale(1.1); }
}
</style>
</head>
<body>
<div class="heart">
 <div class="heart_left"></div>
 <div class="heart_right"></div>
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/sonichty/article/details/123507124