新增情侣头像-html版

问题

能不能再合适的位置加上情侣的 2个头像，然后中间用一个跳动的爱心连接起来？

回答

我已根据您的需求，在页面中添加了情侣头像区域，两个头像之间用跳动的爱心连接，保持了整体浪漫温馨的风格。头像区域位于标题下方、计时器上方，成为视觉焦点之一。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我们的相识时光</title>
  
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            love: {
              light: '#FFD1DC',
              DEFAULT: '#FF69B4',
              dark: '#C71585'
            },
            romantic: {
              light: '#E6E6FA',
              DEFAULT: '#D8BFD8',
              dark: '#9370DB'
            }
          },
          fontFamily: {
            romantic: ['Dancing Script', 'cursive'],
            main: ['Montserrat', 'sans-serif']
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类和动画 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      }
      .card-glow {
        box-shadow: 0 10px 25px -5px rgba(255, 105, 180, 0.3);
      }
      .bg-blur {
        backdrop-filter: blur(8px);
      }
      .avatar-frame {
        box-shadow: 0 0 0 4px white, 0 0 0 6px #FF69B4;
      }
    }
  </style>
  
  <!-- 引入Google字体 -->
  <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Montserrat:wght@300;400;600;700&display=swap" rel="stylesheet">
  
  <style>
    /* 核心动画定义 */
    @keyframes heartbeat {
      0% { transform: scale(1); }
      14% { transform: scale(1.1); }
      28% { transform: scale(1); }
      42% { transform: scale(1.1); }
      70% { transform: scale(1); }
    }
    
    @keyframes float {
      0% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(5deg); }
      100% { transform: translateY(0px) rotate(0deg); }
    }
    
    @keyframes pulse {
      0% { opacity: 0.6; }
      50% { opacity: 1; }
      100% { opacity: 0.6; }
    }
    
    @keyframes numberChange {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }
    
    .heart-beat {
      animation: heartbeat 1.5s ease-in-out infinite;
    }
    
    .float {
      animation: float 6s ease-in-out infinite;
    }
    
    .pulse {
      animation: pulse 4s ease-in-out infinite;
    }
    
    .number-change {
      animation: numberChange 0.5s ease-out;
    }
    
    /* 背景装饰 */
    .bg-decoration {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
      overflow: hidden;
    }
  </style>
</head>
<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">
  <!-- 背景装饰元素 -->
  <div class="bg-decoration">
    <div class="absolute top-[10%] left-[5%] text-love text-5xl opacity-20 float heart-beat">
      <i class="fa fa-heart"></i>
    </div>
    <div class="absolute top-[20%] right-[10%] text-romantic-dark text-4xl opacity-20 float heart-beat" style="animation-delay: 1s;">
      <i class="fa fa-heart"></i>
    </div>
    <div class="absolute bottom-[30%] left-[15%] text-love-dark text-6xl opacity-20 float heart-beat" style="animation-delay: 2s;">
      <i class="fa fa-heart"></i>
    </div>
    <div class="absolute bottom-[20%] right-[5%] text-romantic text-5xl opacity-20 float heart-beat" style="animation-delay: 3s;">
      <i class="fa fa-heart"></i>
    </div>
    <div class="absolute top-[40%] right-[20%] text-love text-4xl opacity-20 float heart-beat" style="animation-delay: 1.5s;">
      <i class="fa fa-heart"></i>
    </div>
  </div>

  <div class="container mx-auto px-4 py-12 flex flex-col items-center justify-center min-h-screen">
    <!-- 标题区域 -->
    <header class="text-center mb-6 md:mb-8">
      <h1 class="font-romantic text-[clamp(2.5rem,8vw,4.5rem)] font-bold text-love-dark mb-4 text-shadow">
        我们的爱情计时器
      </h1>
      <p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-700 max-w-md mx-auto mb-6">
        记录从相遇的那一刻起，每一段珍贵的时光
      </p>
      <div class="relative w-40 h-1 mx-auto bg-gradient-to-r from-transparent via-love to-transparent">
        <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>
      </div>
    </header>

    <!-- 情侣头像区域 -->
    <div class="flex items-center justify-center mb-8 md:mb-12 w-full max-w-2xl">
      <!-- 左侧头像 -->
      <div class="relative">
        <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;">
        <div class="absolute -bottom-2 -right-2 bg-white rounded-full p-1 shadow-md">
          <i class="fa fa-male text-blue-500 text-lg"></i>
        </div>
      </div>
      
      <!-- 中间跳动的爱心 -->
      <div class="mx-4 md:mx-8">
        <div class="relative">
          <i class="fa fa-heart text-4xl md:text-5xl text-love-dark heart-beat"></i>
          <div class="absolute -inset-1 bg-love opacity-30 rounded-full heart-beat"></div>
        </div>
      </div>
      
      <!-- 右侧头像 -->
      <div class="relative">
        <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;">
        <div class="absolute -bottom-2 -right-2 bg-white rounded-full p-1 shadow-md">
          <i class="fa fa-female text-pink-500 text-lg"></i>
        </div>
      </div>
    </div>

    <!-- 相识日期展示 -->
    <div class="mb-8 md:mb-12 bg-white/60 bg-blur p-4 rounded-xl shadow-lg">
      <p class="text-gray-700">我们相识于：<span class="font-semibold text-love-dark">2025年5月29日 17:00</span></p>
    </div>

    <!-- 计时器主区域 -->
    <div class="w-full max-w-5xl grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 md:gap-6">
      <!-- 年 -->
      <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">
        <div class="text-center">
          <div id="years" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
          <div class="text-gray-600 text-sm md:text-base">年</div>
        </div>
      </div>
      
      <!-- 月 -->
      <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">
        <div class="text-center">
          <div id="months" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
          <div class="text-gray-600 text-sm md:text-base">月</div>
        </div>
      </div>
      
      <!-- 日 -->
      <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">
        <div class="text-center">
          <div id="days" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
          <div class="text-gray-600 text-sm md:text-base">日</div>
        </div>
      </div>
      
      <!-- 时 -->
      <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">
        <div class="text-center">
          <div id="hours" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
          <div class="text-gray-600 text-sm md:text-base">时</div>
        </div>
      </div>
      
      <!-- 分 -->
      <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">
        <div class="text-center">
          <div id="minutes" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
          <div class="text-gray-600 text-sm md:text-base">分</div>
        </div>
      </div>
      
      <!-- 秒 -->
      <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">
        <div class="text-center">
          <div id="seconds" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
          <div class="text-gray-600 text-sm md:text-base">秒</div>
        </div>
      </div>
    </div>

    <!-- 爱情寄语 -->
    <div class="mt-12 md:mt-20 text-center max-w-2xl">
      <p class="font-romantic text-[clamp(1.5rem,4vw,2.5rem)] text-romantic-dark italic leading-relaxed">
        "时光荏苒，爱意渐浓<br>
        每一秒都是我们爱情的见证"
      </p>
      <div class="mt-8 flex justify-center">
        <i class="fa fa-heart text-love text-2xl heart-beat"></i>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="mt-auto py-6 text-gray-500 text-sm">
      <p>愿我们的故事，永远继续下去...</p>
    </footer>
  </div>

  <script>
    // 相识日期：2025年5月29日17:00（月份从0开始计数，所以5月是4）
    const meetDate = new Date(2025, 4, 29, 17, 0, 0);

    // 获取DOM元素
    const yearsEl = document.getElementById('years');
    const monthsEl = document.getElementById('months');
    const daysEl = document.getElementById('days');
    const hoursEl = document.getElementById('hours');
    const minutesEl = document.getElementById('minutes');
    const secondsEl = document.getElementById('seconds');

    // 存储上一次的值用于比较
    let previousValues = {
      years: 0,
      months: 0,
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0
    };

    // 计算时间差的函数
    function calculateTimeDifference() {
      const now = new Date();
      const diff = now - meetDate;

      // 计算总秒数
      const totalSeconds = Math.floor(diff / 1000);
      
      // 计算秒
      const seconds = totalSeconds % 60;
      
      // 计算总分钟数
      const totalMinutes = Math.floor(totalSeconds / 60);
      const minutes = totalMinutes % 60;
      
      // 计算总小时数
      const totalHours = Math.floor(totalMinutes / 60);
      const hours = totalHours % 24;
      
      // 计算总天数
      const totalDays = Math.floor(totalHours / 24);
      
      // 更精确地计算月和年（考虑实际月份天数）
      let years = 0;
      let months = 0;
      let remainingDays = totalDays;
      
      // 计算年数（按365天计算）
      years = Math.floor(remainingDays / 365);
      remainingDays = remainingDays % 365;
      
      // 计算月数（按平均30.44天计算）
      months = Math.floor(remainingDays / 30.44);
      const days = Math.floor(remainingDays % 30.44);
      
      return {
        years,
        months,
        days,
        hours,
        minutes,
        seconds
      };
    }

    // 更新计时器显示
    function updateTimer() {
      const timeDiff = calculateTimeDifference();
      
      // 更新每个时间单位并添加动画（如果有变化）
      updateTimeUnit(yearsEl, timeDiff.years, 'years');
      updateTimeUnit(monthsEl, timeDiff.months, 'months');
      updateTimeUnit(daysEl, timeDiff.days, 'days');
      updateTimeUnit(hoursEl, timeDiff.hours, 'hours');
      updateTimeUnit(minutesEl, timeDiff.minutes, 'minutes');
      updateTimeUnit(secondsEl, timeDiff.seconds, 'seconds');
    }

    // 更新单个时间单位并添加动画
    function updateTimeUnit(element, value, key) {
      // 处理需要前导零的情况
      const displayValue = ['hours', 'minutes', 'seconds'].includes(key) 
        ? value.toString().padStart(2, '0') 
        : value;
      
      // 如果值有变化，更新并添加动画
      if (previousValues[key] !== value) {
        element.textContent = displayValue;
        element.classList.add('number-change', 'text-love');
        
        // 移除动画类
        setTimeout(() => {
          element.classList.remove('number-change', 'text-love');
        }, 500);
        
        // 更新存储的值
        previousValues[key] = value;
      }
    }

    // 初始化计时器并每秒更新
    updateTimer();
    setInterval(updateTimer, 1000);
  </script>
</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
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356

新添加的头像区域具有以下特点：

两个圆形头像使用白色和粉色边框装饰，增强视觉效果
头像右下角分别添加了性别标识（男/女）
头像具有轻微的浮动动画，增加页面活力
中间的爱心采用双层设计，外层有扩散效果，内层有心跳动画，象征爱情的律动
响应式设计，在移动设备上会自动调整大小和间距

您可以将示例头像地址（https://picsum.photos/seed/lover1/200 和 https://picsum.photos/seed/lover2/200）替换为你们自己的情侣照片，让这个计时器更具个性化意义。

网络方案

frp

vdoing部署

vdoing指南

vdoing折腾

vdoing文章

v1

v2

v3

v4

v5

cdn

多吉云cdn

hexo

hugo

hugo主题

hextra

zola

mkdocs

docusaurus

VuePress

VitePress

自签证书

其它

新增情侣头像-html版

问题

回答

frp

多吉云cdn

hugo主题

hextra

新增情侣头像-html版 ​

问题 ​

回答 ​

新增情侣头像-html版

问题

回答