--
:
--
:
--
v1-html初始版
最后更新于:
问题
帮我生成 一个情侣相识计时器 的前端项目，要求漂亮一点风格。 我们相识日期是2025.5.29 17:00
回答
下面为您创建一个视觉精美的情侣相识计时器页面，采用浪漫温馨的设计风格，完美展示你们从2025年5月29日17:00相识至今的时光。
这个计时器不仅会实时显示相识的年、月、日、时、分、秒，还添加了精心设计的动画效果和爱情元素，营造出甜蜜浪漫的氛围。页面采用响应式设计，在手机和桌面设备上都能完美展示。
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 }
51 </style>
52
53 <!-- 引入Google字体 -->
54 <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Montserrat:wght@300;400;600;700&display=swap" rel="stylesheet">
55
56 <style>
57 /* 核心动画定义 */
58 @keyframes heartbeat {
59 0% { transform: scale(1); }
60 14% { transform: scale(1.1); }
61 28% { transform: scale(1); }
62 42% { transform: scale(1.1); }
63 70% { transform: scale(1); }
64 }
65
66 @keyframes float {
67 0% { transform: translateY(0px) rotate(0deg); }
68 50% { transform: translateY(-20px) rotate(5deg); }
69 100% { transform: translateY(0px) rotate(0deg); }
70 }
71
72 @keyframes pulse {
73 0% { opacity: 0.6; }
74 50% { opacity: 1; }
75 100% { opacity: 0.6; }
76 }
77
78 @keyframes numberChange {
79 0% { transform: scale(1); }
80 50% { transform: scale(1.2); }
81 100% { transform: scale(1); }
82 }
83
84 .heart-beat {
85 animation: heartbeat 1.5s ease-in-out infinite;
86 }
87
88 .float {
89 animation: float 6s ease-in-out infinite;
90 }
91
92 .pulse {
93 animation: pulse 4s ease-in-out infinite;
94 }
95
96 .number-change {
97 animation: numberChange 0.5s ease-out;
98 }
99
100 /* 背景装饰 */
101 .bg-decoration {
102 position: fixed;
103 width: 100%;
104 height: 100%;
105 top: 0;
106 left: 0;
107 z-index: -1;
108 overflow: hidden;
109 }
110 </style>
111</head>
112<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">
113 <!-- 背景装饰元素 -->
114 <div class="bg-decoration">
115 <div class="absolute top-[10%] left-[5%] text-love text-5xl opacity-20 float heart-beat">
116 <i class="fa fa-heart"></i>
117 </div>
118 <div class="absolute top-[20%] right-[10%] text-romantic-dark text-4xl opacity-20 float heart-beat" style="animation-delay: 1s;">
119 <i class="fa fa-heart"></i>
120 </div>
121 <div class="absolute bottom-[30%] left-[15%] text-love-dark text-6xl opacity-20 float heart-beat" style="animation-delay: 2s;">
122 <i class="fa fa-heart"></i>
123 </div>
124 <div class="absolute bottom-[20%] right-[5%] text-romantic text-5xl opacity-20 float heart-beat" style="animation-delay: 3s;">
125 <i class="fa fa-heart"></i>
126 </div>
127 <div class="absolute top-[40%] right-[20%] text-love text-4xl opacity-20 float heart-beat" style="animation-delay: 1.5s;">
128 <i class="fa fa-heart"></i>
129 </div>
130 </div>
131
132 <div class="container mx-auto px-4 py-12 flex flex-col items-center justify-center min-h-screen">
133 <!-- 标题区域 -->
134 <header class="text-center mb-10 md:mb-16">
135 <h1 class="font-romantic text-[clamp(2.5rem,8vw,4.5rem)] font-bold text-love-dark mb-4 text-shadow">
136 我们的爱情计时器
137 </h1>
138 <p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-700 max-w-md mx-auto mb-6">
139 记录从相遇的那一刻起，每一段珍贵的时光
140 </p>
141 <div class="relative w-40 h-1 mx-auto bg-gradient-to-r from-transparent via-love to-transparent">
142 <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>
143 </div>
144 </header>
145
146 <!-- 相识日期展示 -->
147 <div class="mb-8 md:mb-12 bg-white/60 bg-blur p-4 rounded-xl shadow-lg">
148 <p class="text-gray-700">我们相识于：<span class="font-semibold text-love-dark">2025年5月29日 17:00</span></p>
149 </div>
150
151 <!-- 计时器主区域 -->
152 <div class="w-full max-w-5xl grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 md:gap-6">
153 <!-- 年 -->
154 <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">
155 <div class="text-center">
156 <div id="years" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
157 <div class="text-gray-600 text-sm md:text-base">年</div>
158 </div>
159 </div>
160
161 <!-- 月 -->
162 <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">
163 <div class="text-center">
164 <div id="months" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
165 <div class="text-gray-600 text-sm md:text-base">月</div>
166 </div>
167 </div>
168
169 <!-- 日 -->
170 <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">
171 <div class="text-center">
172 <div id="days" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
173 <div class="text-gray-600 text-sm md:text-base">日</div>
174 </div>
175 </div>
176
177 <!-- 时 -->
178 <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">
179 <div class="text-center">
180 <div id="hours" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
181 <div class="text-gray-600 text-sm md:text-base">时</div>
182 </div>
183 </div>
184
185 <!-- 分 -->
186 <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">
187 <div class="text-center">
188 <div id="minutes" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
189 <div class="text-gray-600 text-sm md:text-base">分</div>
190 </div>
191 </div>
192
193 <!-- 秒 -->
194 <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">
195 <div class="text-center">
196 <div id="seconds" class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-love-dark mb-2">0</div>
197 <div class="text-gray-600 text-sm md:text-base">秒</div>
198 </div>
199 </div>
200 </div>
201
202 <!-- 爱情寄语 -->
203 <div class="mt-12 md:mt-20 text-center max-w-2xl">
204 <p class="font-romantic text-[clamp(1.5rem,4vw,2.5rem)] text-romantic-dark italic leading-relaxed">
205 "时光荏苒，爱意渐浓<br>
206 每一秒都是我们爱情的见证"
207 </p>
208 <div class="mt-8 flex justify-center">
209 <i class="fa fa-heart text-love text-2xl heart-beat"></i>
210 </div>
211 </div>
212
213 <!-- 页脚 -->
214 <footer class="mt-auto py-6 text-gray-500 text-sm">
215 <p>愿我们的故事，永远继续下去...</p>
216 </footer>
217 </div>
218
219 <script>
220 // 相识日期：2025年5月29日17:00（月份从0开始计数，所以5月是4）
221 const meetDate = new Date(2025, 4, 29, 17, 0, 0);
222
223 // 获取DOM元素
224 const yearsEl = document.getElementById('years');
225 const monthsEl = document.getElementById('months');
226 const daysEl = document.getElementById('days');
227 const hoursEl = document.getElementById('hours');
228 const minutesEl = document.getElementById('minutes');
229 const secondsEl = document.getElementById('seconds');
230
231 // 存储上一次的值用于比较
232 let previousValues = {
233 years: 0,
234 months: 0,
235 days: 0,
236 hours: 0,
237 minutes: 0,
238 seconds: 0
239 };
240
241 // 计算时间差的函数
242 function calculateTimeDifference() {
243 const now = new Date();
244 const diff = now - meetDate;
245
246 // 计算总秒数
247 const totalSeconds = Math.floor(diff / 1000);
248
249 // 计算秒
250 const seconds = totalSeconds % 60;
251
252 // 计算总分钟数
253 const totalMinutes = Math.floor(totalSeconds / 60);
254 const minutes = totalMinutes % 60;
255
256 // 计算总小时数
257 const totalHours = Math.floor(totalMinutes / 60);
258 const hours = totalHours % 24;
259
260 // 计算总天数
261 const totalDays = Math.floor(totalHours / 24);
262
263 // 更精确地计算月和年（考虑实际月份天数）
264 let years = 0;
265 let months = 0;
266 let remainingDays = totalDays;
267
268 // 计算年数（按365天计算）
269 years = Math.floor(remainingDays / 365);
270 remainingDays = remainingDays % 365;
271
272 // 计算月数（按平均30.44天计算）
273 months = Math.floor(remainingDays / 30.44);
274 const days = Math.floor(remainingDays % 30.44);
275
276 return {
277 years,
278 months,
279 days,
280 hours,
281 minutes,
282 seconds
283 };
284 }
285
286 // 更新计时器显示
287 function updateTimer() {
288 const timeDiff = calculateTimeDifference();
289
290 // 更新每个时间单位并添加动画（如果有变化）
291 updateTimeUnit(yearsEl, timeDiff.years, 'years');
292 updateTimeUnit(monthsEl, timeDiff.months, 'months');
293 updateTimeUnit(daysEl, timeDiff.days, 'days');
294 updateTimeUnit(hoursEl, timeDiff.hours, 'hours');
295 updateTimeUnit(minutesEl, timeDiff.minutes, 'minutes');
296 updateTimeUnit(secondsEl, timeDiff.seconds, 'seconds');
297 }
298
299 // 更新单个时间单位并添加动画
300 function updateTimeUnit(element, value, key) {
301 // 处理需要前导零的情况
302 const displayValue = ['hours', 'minutes', 'seconds'].includes(key)
303 ? value.toString().padStart(2, '0')
304 : value;
305
306 // 如果值有变化，更新并添加动画
307 if (previousValues[key] !== value) {
308 element.textContent = displayValue;
309 element.classList.add('number-change', 'text-love');
310
311 // 移除动画类
312 setTimeout(() => {
313 element.classList.remove('number-change', 'text-love');
314 }, 500);
315
316 // 更新存储的值
317 previousValues[key] = value;
318 }
319 }
320
321 // 初始化计时器并每秒更新
322 updateTimer();
323 setInterval(updateTimer, 1000);
324 </script>
325</body>
326</html>
这个情侣相识计时器具有以下特色：
- 浪漫的粉紫色渐变背景，搭配浮动的爱心装饰，营造甜蜜氛围
- 精心设计的卡片式计时器，展示年、月、日、时、分、秒
- 时间变化时的动画效果，让每一秒的流逝都充满仪式感
- 响应式布局，在手机和桌面设备上都能完美展示
- 卡片悬停效果，增加交互趣味性
- 顶部优雅的标题和底部浪漫的爱情寄语，丰富页面情感表达
您可以直接使用这段代码，它会自动计算并显示从2025年5月29日17:00到当前时间的所有时间差，并实时更新。
📡
推荐使用微信支付
推荐使用支付宝
