-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path小甜豆.html
164 lines (148 loc) · 4.95 KB
/
小甜豆.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生日祝福</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Pacifico&display=swap" rel="stylesheet">
<style>
/* 初始页面 - 信封 */
.envelope-page {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f8f8f8;
cursor: pointer;
}
.envelope {
width: 200px;
height: 120px;
background-color: #ff6f61;
position: relative;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.envelope::before {
content: '';
position: absolute;
top: -60px;
left: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 60px solid #ff6f61;
}
.envelope::after {
content: '💌';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
}
.envelope:hover {
transform: scale(1.1);
}
/* 跳转后的页面 - 爱心背景 */
.heart-page {
display: none;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ffebee;
position: relative;
overflow: hidden;
}
.heart {
position: absolute;
font-size: 2rem;
color: #ff6f61;
animation: float 5s infinite ease-in-out;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
.birthday-message {
text-align: center;
z-index: 2;
max-width: 600px;
padding: 20px;
background: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.birthday-message h1 {
font-size: 4rem;
margin: 0;
color: #ff6f61;
font-family: 'Pacifico', cursive;
}
.birthday-message p {
font-size: 1.5rem;
margin: 20px 0;
color: #333;
font-family: 'Dancing Script', cursive;
line-height: 1.6;
}
/* 爱心飘落特效 */
@keyframes fall {
to {
transform: translateY(100vh);
}
}
.heart {
position: absolute;
top: -50px;
animation: fall linear infinite;
}
</style>
</head>
<body>
<!-- 初始页面 - 信封 -->
<div class="envelope-page" onclick="openHeartPage()">
<div class="envelope"></div>
</div>
<!-- 跳转后的页面 - 爱心背景 -->
<div class="heart-page" id="heartPage">
<div class="birthday-message">
<h1>生日快乐！</h1>
<p>
小甜豆，<br><br>
生日快乐！🎂🎉<br><br>
又是一年你的专属节日，今天是没有流星也可以许愿的日子，恭喜你又收获了一年的快乐与幸福，很高兴今年可以陪你长大一岁。<br><br>
一直都想对你说，很幸运遇见你。<br><br>
愿你可以被时光温柔所待，万事胜意！希望你可以天天开心，早点睡觉，好好吃饭，顺顺利利，无忧无虑。希望你平平安安，永远幸福快乐，永远没有烦恼！<br><br>
再次祝你生日快乐，小甜豆！希望你永远健康、快乐、美丽。
</p>
</div>
</div>
<script>
// 跳转到爱心页面
function openHeartPage() {
document.querySelector('.envelope-page').style.display = 'none';
document.getElementById('heartPage').style.display = 'flex';
// 创建爱心飘落特效
const heartContainer = document.getElementById('heartPage');
setInterval(() => {
const heart = document.createElement('div');
heart.classList.add('heart');
heart.innerText = '❤️';
heart.style.left = Math.random() * 100 + 'vw';
heart.style.animationDuration = Math.random() * 3 + 2 + 's';
heartContainer.appendChild(heart);
setTimeout(() => {
heart.remove();
}, 5000);
}, 300);
}
</script>
</body>
</html>