简单前端小案例（HTML5+CSS）——跳动的心

最新推荐文章于 2023-12-20 10:45:48 发布

_SnowMultiflora

最新推荐文章于 2023-12-20 10:45:48 发布

阅读量2.5k

点赞数 4

分类专栏：前端文章标签：前端 html

本文链接：https://blog.csdn.net/Xw_Vivian/article/details/99537837

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>粉色爱心❤</title>
		<style>
			*{
				background-color: skyblue;
			}
			.love{
				background-color: pink;
				width: 200px;
				height: 200px;
				box-shadow: 0px 0px 70px pink;
				animation: 1s hb infinite;   <!--调用动画 infinite循环动画-->
			}
			.y1{
				border-radius: 100px;
				position: absolute;
				left: 703px;
				top: 199px;
			}
			.y2{
				border-radius: 100px;
				position: absolute;
				left: 541px;
				top: 201px;
			}
			.f{
				transform: rotate(45deg);<!--旋转45度-->
				position: absolute;
				left: 620px;
				top: 280px;
			}
			@keyframes hb{
				0%{transform: scale(1) rotate(45deg);}
				50%{transform: scale(1.1) rotate(45deg);}
				100%{transform: scale(1) rotate(45deg);}
			}
		</style>
	</head>
	<body>
		<div class="love y1"></div>
		<div class="love y2"></div>
		<div class="love f"></div>
	</body>
</html>

开发工具HBuilder X

效果：