Skip to content

Commit 2023240

Browse files
11python1111python11
authored
Add files via upload
1 parent e70686f commit 2023240

File tree

1 file changed

+72
-0
lines changed

1 file changed

+72
-0
lines changed

‎heart-page/index.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>爱心页面</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
min-height: 100vh;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
background: #f0f0f0;
15+
}
16+
17+
/* 爱心样式 */
18+
.heart {
19+
position: relative;
20+
width: 150px;
21+
height: 150px;
22+
background: #ff3e6c;
23+
transform: rotate(-45deg);
24+
animation: beat 1.5s infinite;
25+
box-shadow: 0 0 30px rgba(255, 62, 108, 0.5);
26+
}
27+
28+
.heart::before,
29+
.heart::after {
30+
content: '';
31+
position: absolute;
32+
width: 150px;
33+
height: 150px;
34+
background: #ff3e6c;
35+
border-radius: 50%;
36+
}
37+
38+
.heart::before {
39+
top: -75px;
40+
left: 0;
41+
}
42+
43+
.heart::after {
44+
top: 0;
45+
left: 75px;
46+
}
47+
48+
/* 心跳动画 */
49+
@keyframes beat {
50+
0% {
51+
transform: rotate(-45deg) scale(1);
52+
}
53+
15% {
54+
transform: rotate(-45deg) scale(1.2);
55+
}
56+
30% {
57+
transform: rotate(-45deg) scale(1);
58+
}
59+
45% {
60+
transform: rotate(-45deg) scale(1.2);
61+
}
62+
60% {
63+
transform: rotate(-45deg) scale(1);
64+
}
65+
}
66+
</style>
67+
</head>
68+
<body>
69+
<!-- 页面加载后自动显示爱心 -->
70+
<div class="heart"></div>
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)