HTML+CSS——实现跳动的心

作者：2023面试高手 | 2024-05-21 16:08:55

踩

HTML+CSS——实现跳动的心

跳动的爱~心

所谓

爱心是指同情怜悯之心态（包括相应的一定行动）
它是一种奉献精神，更是关怀、爱护人的思想感情，包括于所有情感之中。
爱心的深层含义就是保护所有的动植物。广义的爱心就是保护所有生命

一、结果图

在这里插入图片描述

二、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>跳动的心</title>
		<style>
			body{background-color: pink;}
			.heart{
				width: 200px;
				height: 200px;
				position: fixed;
				left: 50%;
				right: 50%;
				margin: 200px 0 0 -100px;
				animation: jump 2s infinite;
			}
			.center{
				width: 138px;
				height: 138px;
				background-color: red;
				position: absolute;
				left: 30px;
				top: 30px;
				transform: rotate(45deg);
			}
			.left{
				width: 141.42px;
				height: 141.42px;
				border-radius: 100px;
				background-color: red;
				position: absolute;
				left: -10px;
				top: -10px;
			}
			.right{
				width: 141.42px;
				height: 141.42px;
				border-radius: 100px;
				background-color: red;
				position: absolute;
				left: 68px;
				top: -10px;
			}
			@keyframes jump{
				0%{transform: scale(1)}
				10%{transform: scale(1.3)}
				20%{transform: scale(1)}
				30%{transform: scale(1.6)}
				40%{transform: scale(2)}
				100%{transform: scale(1)}
			}
			
		</style>
	</head>
	<body>
		<div class="heart">
			<div class="left"></div>
			<div class="right"></div>
			<div class="center"></div>
		</div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/603470