--
:
--
:
--
v2-新增情侣头像-html版
最后更新于:
问题
能不能再合适的位置加上 情侣的 2个头像，然后中间用一个跳动的爱心 连接起来？
回答
我已根据您的需求，在页面中添加了情侣头像区域，两个头像之间用跳动的爱心连接，保持了整体浪漫温馨的风格。头像区域位于标题下方、计时器上方，成为视觉焦点之一。
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
8 <!-- 引入外部资源 -->
9 <script src="https://cdn.tailwindcss.com"></script>
10 <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
11
12 <!-- 配置Tailwind自定义主题 -->
13 <script>
14 tailwind.config = {
15 theme: {
16 extend: {
17 colors: {
18 love: {
19 light: '#FFD1DC',
20 DEFAULT: '#FF69B4',
21 dark: '#C71585'
22 },
23 romantic: {
24 light: '#E6E6FA',
25 DEFAULT: '#D8BFD8',
26 dark: '#9370DB'
27 }
28 },
29 fontFamily: {
30 romantic: ['Dancing Script', 'cursive'],
31 main: ['Montserrat', 'sans-serif']
32 },
33 },
34 }
35 }
36 </script>
37
38 <!-- 自定义工具类和动画 -->
39 <style type="text/tailwindcss">
40 @layer utilities {
41 .text-shadow {
42 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
43 }
44 .card-glow {
45 box-shadow: 0 10px 25px -5px rgba(255, 105, 180, 0.3);
46 }
47 .bg-blur {
48 backdrop-filter: blur(8px);
49 }
50 .avatar-frame {
51 box-shadow: 0 0 0 4px white, 0 0 0 6px #FF69B4;
52 }
53 }
54 </style>
55
56 <!-- 引入Google字体 -->
57 <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Montserrat:wght@300;400;600;700&display=swap" rel="stylesheet">
58
59 <style>
60 /* 核心动画定义 */
61 @keyframes heartbeat {
62 0% { transform: scale(1); }
63 14% { transform: scale(1.1); }
64 28% { transform: scale(1); }
65 42% { transform: scale(1.1); }
66 70% { transform: scale(1); }
67 }
68
69 @keyframes float {
70 0% { transform: translateY(0px) rotate(0deg); }
71 50% { transform: translateY(-20px) rotate(5deg); }
72 100% { transform: translateY(0px) rotate(0deg); }
73 }
74
75 @keyframes pulse {
76 0% { opacity: 0.6; }
77 50% { opacity: 1; }
78 100% { opacity: 0.6; }
79 }
80
81 @keyframes numberChange {
82 0% { transform: scale(1); }
83 50% { transform: scale(1.2); }
84 100% { transform: scale(1); }
85 }
86
87 .heart-beat {
88 animation: heartbeat 1.5s ease-in-out infinite;
89 }
90
91 .float {
92 animation: float 6s ease-in-out infinite;
93 }
94
95 .pulse {
96 animation: pulse 4s ease-in-out infinite;
97 }
98
99 .number-change {
100 animation: numberChange 0.5s ease-out;
101 }
102
103 /* 背景装饰 */
104 .bg-decoration {
105 position: fixed;
106 width: 100%;
107 height: 100%;
108 top: 0;
109 left: 0;
110 z-index: -1;
111 overflow: hidden;
112 }
113 </style>
114</head>
115<body class="min-h-screen bg-gradient-to-br from-love-light via-romantic-light to-love-light font-main text-gray-800 overflow-x-hidden">
116 <!-- 背景装饰元素 -->
117 <div class="bg-decoration">
118 <div class="absolute top-[10%] left-[5%] text-love text-5xl opacity-20 float heart-beat">
119 <i class="fa fa-heart"></i>
120 </div>
121 <div class="absolute top-[20%] right-[10%] text-romantic-dark text-4xl opacity-20 float heart-beat" style="animation-delay: 1s;">
122 <i class="fa fa-heart"></i>
123 </div>
124 <div class="absolute bottom-[30%] left-[15%] text-love-dark text-6xl opacity-20 float heart-beat" style="animation-delay: 2s;">
125 <i class="fa fa-heart"></i>
126 </div>
127 <div class="absolute bottom-[20%] right-[5%] text-romantic text-5xl opacity-20 float heart-beat" style="animation-delay: 3s;">
128 <i class="fa fa-heart"></i>
129 </div>
130 <div class="absolute top-[40%] right-[20%] text-love text-4xl opacity-20 float heart-beat" style="animation-delay: 1.5s;">
131 <i class="fa fa-heart"></i>
132 </div>
133 </div>
134
135 <div class="container mx-auto px-4 py-12 flex flex-col items-center justify-center min-h-screen">
136 <!-- 标题区域 -->
137 <header class="text-center mb-6 md:mb-8">
138 <h1 class="font-romantic text-[clamp(2.5rem,8vw,4.5rem)] font-bold text-love-dark mb-4 text-shadow">
139 我们的爱情计时器
140 </h1>
141 <p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-700 max-w-md mx-auto mb-6">
142 记录从相遇的那一刻起，每一段珍贵的时光
143 </p>
144 <div class="relative w-40 h-1 mx-auto bg-gradient-to-r from-transparent via-love to-transparent">
145 <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-love pulse"></div>
146 </div>
147 </header>
148
149 <!-- 情侣头像区域 -->
150 <div class="flex items-center justify-center mb-8 md:mb-12 w-full max-w-2xl">
151 <!-- 左侧头像 -->
152 <div class="relative">
153 <img src="https://picsum.photos/seed/lover1/200" alt="情侣头像1" class="w-24 h-24 md:w-32 md:h-32 rounded-full object-cover avatar-frame float" style="animation-delay: 0.5s;">
154 <div class="absolute -bottom-2 -right-2 bg-white rounded-full p-1 shadow-md">
155 <i class="fa fa-male text-blue-500 text-lg"></i>
156 </div>
157 </div>
158
159 <!-- 中间跳动的爱心 -->
160 <div class="mx-4 md:mx-8">
161 <div class="relative">
162 <i class="fa fa-heart text-4xl md:text-5xl text-love-dark heart-beat"></i>
163 <div class="absolute -inset-1 bg-love opacity-30 rounded-full heart-beat"></div>
164 </div>
165 </div>
166
167 <!-- 右侧头像 -->
168 <div class="relative">
169 <img src="https://picsum.photos/seed/lover2/200" alt="情侣头像2" class="w-24 h-24 md:w-32 md:h-32 rounded-full object-cover avatar-frame float" style="animation-delay: 1s;">
170 <div class="absolute -bottom-2 -right-2 bg-white rounded-full p-1 shadow-md">
171 <i class="fa fa-female text-pink-500 text-lg"></i>
172 </div>
173 </div>
174 </div>
175
176 <!-- 相识日期展示 -->
177 <div class="mb-8 md:mb-12 bg-white/60 bg-blur p-4 rounded-xl shadow-lg">
178 <p class="text-gray-700">我们相识于：<span class="font-semibold text-love-dark">2025年5月29日 17:00</span></p>
179 </div>
180
181 <!-- 计时器主区域 -->
182 <div class="w-full max-w-5xl grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 md:gap-6">
183 <!-- 年 -->
184 <div class="timer-card bg-white/70 bg-blur rounded-xl p-4 md:p-6 card-glow transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
185 <div class="text-center">
186 <div id="years" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
187 <div class="text-gray-600 text-sm md:text-base">年</div>
188 </div>
189 </div>
190
191 <!-- 月 -->
192 <div class="timer-card bg-white/70 bg-blur rounded-xl p-4 md:p-6 card-glow transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
193 <div class="text-center">
194 <div id="months" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
195 <div class="text-gray-600 text-sm md:text-base">月</div>
196 </div>
197 </div>
198
199 <!-- 日 -->
200 <div class="timer-card bg-white/70 bg-blur rounded-xl p-4 md:p-6 card-glow transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
201 <div class="text-center">
202 <div id="days" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
203 <div class="text-gray-600 text-sm md:text-base">日</div>
204 </div>
205 </div>
206
207 <!-- 时 -->
208 <div class="timer-card bg-white/70 bg-blur rounded-xl p-4 md:p-6 card-glow transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
209 <div class="text-center">
210 <div id="hours" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
211 <div class="text-gray-600 text-sm md:text-base">时</div>
212 </div>
213 </div>
214
215 <!-- 分 -->
216 <div class="timer-card bg-white/70 bg-blur rounded-xl p-4 md:p-6 card-glow transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
217 <div class="text-center">
218 <div id="minutes" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
219 <div class="text-gray-600 text-sm md:text-base">分</div>
220 </div>
221 </div>
222
223 <!-- 秒 -->
224 <div class="timer-card bg-white/70 bg-blur rounded-xl p-4 md:p-6 card-glow transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
225 <div class="text-center">
226 <div id="seconds" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
227 <div class="text-gray-600 text-sm md:text-base">秒</div>
228 </div>
229 </div>
230 </div>
231
232 <!-- 爱情寄语 -->
233 <div class="mt-12 md:mt-20 text-center max-w-2xl">
234 <p class="font-romantic text-[clamp(1.5rem,4vw,2.5rem)] text-romantic-dark italic leading-relaxed">
235 "时光荏苒，爱意渐浓<br>
236 每一秒都是我们爱情的见证"
237 </p>
238 <div class="mt-8 flex justify-center">
239 <i class="fa fa-heart text-love text-2xl heart-beat"></i>
240 </div>
241 </div>
242
243 <!-- 页脚 -->
244 <footer class="mt-auto py-6 text-gray-500 text-sm">
245 <p>愿我们的故事，永远继续下去...</p>
246 </footer>
247 </div>
248
249 <script>
250 // 相识日期：2025年5月29日17:00（月份从0开始计数，所以5月是4）
251 const meetDate = new Date(2025, 4, 29, 17, 0, 0);
252
253 // 获取DOM元素
254 const yearsEl = document.getElementById('years');
255 const monthsEl = document.getElementById('months');
256 const daysEl = document.getElementById('days');
257 const hoursEl = document.getElementById('hours');
258 const minutesEl = document.getElementById('minutes');
259 const secondsEl = document.getElementById('seconds');
260
261 // 存储上一次的值用于比较
262 let previousValues = {
263 years: 0,
264 months: 0,
265 days: 0,
266 hours: 0,
267 minutes: 0,
268 seconds: 0
269 };
270
271 // 计算时间差的函数
272 function calculateTimeDifference() {
273 const now = new Date();
274 const diff = now - meetDate;
275
276 // 计算总秒数
277 const totalSeconds = Math.floor(diff / 1000);
278
279 // 计算秒
280 const seconds = totalSeconds % 60;
281
282 // 计算总分钟数
283 const totalMinutes = Math.floor(totalSeconds / 60);
284 const minutes = totalMinutes % 60;
285
286 // 计算总小时数
287 const totalHours = Math.floor(totalMinutes / 60);
288 const hours = totalHours % 24;
289
290 // 计算总天数
291 const totalDays = Math.floor(totalHours / 24);
292
293 // 更精确地计算月和年（考虑实际月份天数）
294 let years = 0;
295 let months = 0;
296 let remainingDays = totalDays;
297
298 // 计算年数（按365天计算）
299 years = Math.floor(remainingDays / 365);
300 remainingDays = remainingDays % 365;
301
302 // 计算月数（按平均30.44天计算）
303 months = Math.floor(remainingDays / 30.44);
304 const days = Math.floor(remainingDays % 30.44);
305
306 return {
307 years,
308 months,
309 days,
310 hours,
311 minutes,
312 seconds
313 };
314 }
315
316 // 更新计时器显示
317 function updateTimer() {
318 const timeDiff = calculateTimeDifference();
319
320 // 更新每个时间单位并添加动画（如果有变化）
321 updateTimeUnit(yearsEl, timeDiff.years, 'years');
322 updateTimeUnit(monthsEl, timeDiff.months, 'months');
323 updateTimeUnit(daysEl, timeDiff.days, 'days');
324 updateTimeUnit(hoursEl, timeDiff.hours, 'hours');
325 updateTimeUnit(minutesEl, timeDiff.minutes, 'minutes');
326 updateTimeUnit(secondsEl, timeDiff.seconds, 'seconds');
327 }
328
329 // 更新单个时间单位并添加动画
330 function updateTimeUnit(element, value, key) {
331 // 处理需要前导零的情况
332 const displayValue = ['hours', 'minutes', 'seconds'].includes(key)
333 ? value.toString().padStart(2, '0')
334 : value;
335
336 // 如果值有变化，更新并添加动画
337 if (previousValues[key] !== value) {
338 element.textContent = displayValue;
339 element.classList.add('number-change', 'text-love');
340
341 // 移除动画类
342 setTimeout(() => {
343 element.classList.remove('number-change', 'text-love');
344 }, 500);
345
346 // 更新存储的值
347 previousValues[key] = value;
348 }
349 }
350
351 // 初始化计时器并每秒更新
352 updateTimer();
353 setInterval(updateTimer, 1000);
354 </script>
355</body>
356</html>
新添加的头像区域具有以下特点：
- 两个圆形头像使用白色和粉色边框装饰，增强视觉效果
- 头像右下角分别添加了性别标识（男/女）
- 头像具有轻微的浮动动画，增加页面活力
- 中间的爱心采用双层设计，外层有扩散效果，内层有心跳动画，象征爱情的律动
- 响应式设计，在移动设备上会自动调整大小和间距
您可以将示例头像地址（https://picsum.photos/seed/lover1/200 和 https://picsum.photos/seed/lover2/200）替换为你们自己的情侣照片，让这个计时器更具个性化意义。
📡
推荐使用微信支付
推荐使用支付宝
