One

主题

00:00:00
2025-10-222025-10-22专题开源项目相识纪念日v1-2025
1987
10.4m
0

html初始版 ​

问题 ​

帮我生成 一个情侣相识计时器 的前端项目，要求漂亮一点风格。 我们相识日期是2025.5.29 17:00

回答 ​

下面为您创建一个视觉精美的情侣相识计时器页面，采用浪漫温馨的设计风格，完美展示你们从2025年5月29日17:00相识至今的时光。

这个计时器不仅会实时显示相识的年、月、日、时、分、秒，还添加了精心设计的动画效果和爱情元素，营造出甜蜜浪漫的氛围。页面采用响应式设计，在手机和桌面设备上都能完美展示。

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);
      }
    }
  </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-10 md:mb-16">
      <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="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>

这个情侣相识计时器具有以下特色：

  • 浪漫的粉紫色渐变背景，搭配浮动的爱心装饰，营造甜蜜氛围
  • 精心设计的卡片式计时器，展示年、月、日、时、分、秒
  • 时间变化时的动画效果，让每一秒的流逝都充满仪式感
  • 响应式布局，在手机和桌面设备上都能完美展示
  • 卡片悬停效果，增加交互趣味性
  • 顶部优雅的标题和底部浪漫的爱情寄语，丰富页面情感表达

您可以直接使用这段代码，它会自动计算并显示从2025年5月29日17:00到当前时间的所有时间差，并实时更新。

最近更新