css布局实现pc端简洁风格ai数字永生亲人复活数字人落地页官网介绍代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现pc端简洁风格ai数字永生亲人复活数字人落地页官网介绍代码

代码标签： css 布局 pc端 ai 数字简洁永生亲人复活落地页官网介绍数字人代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>忆影 | AI数字人亲人复活技术</title>
  <!-- 引入Tailwind CSS -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
  <!-- 引入Font Awesome -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  <!-- 引入Chart.js -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chart.umd.4.4.1.js"></script>
  
  <!-- 配置Tailwind -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36BFFA',
            accent: '#7B61FF',
            dark: '#1D2939',
            light: '#F9FAFB',
            neutral: '#667085',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
      }
      .gradient-overlay {
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
      }
      .glass-effect {
        @apply bg-white/10 backdrop-blur-md border border-white/20;
      }
    }
  </style>
  
  <style>
    /* 基础动画 */
    .fade-in {
      animation: fadeIn 0.8s ease forwards;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 滚动进度条 */
    ::-webkit-scrollbar {
      width: 6px;
    }
    
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    
    ::-webkit-scrollbar-thumb {
      background: #165DFF;
      border-radius: 3px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: #0E42D2;
    }
    
    /* 视频通话界面效果 */
    .video-pulse {
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4); }
      70% { box-shadow: 0 0 0 10px rgba(22, 93, 255, 0); }
      100% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0); }
    }
    
    /* 数字人渐变效果 */
    .digital-gradient {
      background: linear-gradient(135deg, #165DFF 0%, #7B61FF 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }
  </style>
</head>

<body class="font-sans text-dark bg-light overflow-x-hidden">
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/90 backdrop-blur-md shadow-sm">
    <div class="container mx-auto px-6 md:px-12 py-4">
      <div class="flex justify-between items-center">
        <!-- Logo -->
        <a href="#" class="flex items-center gap-2">
          <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-accent flex items-center justify-center">
            <i class="fa fa-video-camera text-white text-xl"></i>
          </div>
          <span class="text-xl font-bold">忆影</span>
        </a>
        
        <!-- 导航链接 - 仅PC显示 -->
        <nav class="hidden md:flex items-center gap-8">
          <a href="#features" class="text-neutral hover:text-primary transition-colors">技术特点</a>
          <a href="#process" class="text-neutral hover:text-primary transition-colors">制作流程</a>
          <a href="#examples" class="text-neutral hover:text-primary transition-colors">成功案例</a>
          <a href="#faq" class="text-neutral hover:text-primary transition-colors">常见问题</a>
          <a href="#contact" class="text-neutral hover:text-primary transition-colors">联系我们</a>
        </nav>
        
        <!-- 咨询按钮 -->
        <div class="hidden md:block">
          <a href="#contact" class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg">
            免费咨询
          </a>
        </div>
        
        <!-- 移动端菜单按钮 -->
        <button id="menu-toggle" class="md:hidden text-dark text-2xl">
          <i class="fa fa-bars"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="md:hidden hidden bg-white border-t animate-fadeIn">
      <div class="container mx-auto px-6 py-4 flex flex-col gap-4">
        <a href="#features" class="text-neutral hover:text-primary py-2 transition-colors">技术特点</a>
        <a href="#process" class="text-neutral hover:text-primary py-2 transition-colors">制作流程</a>
        <a href="#examples" class="text-neutral hover:text-primary py-2 transition-colors">成功案例</a>
        <a href="#faq" class="text-neutral hover:text-primary py-2 transition-colors">常见问题</a>
        <a href="#contact" class="text-neutral hover:text-primary py-2 transition-colors">联系我们</a>
        <a href="#contact" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg text-center transition-all">
          免费咨询
        </a>
      </div>
    </div>
  </header>

  <main>
    <!-- 英雄区域 -->
    <section class="pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden">
      <div class="container mx-auto px-6 md:px-12">
        <div class="flex flex-col lg:flex-row items-center gap-12">
          <div class="lg:w-1/2 fade-in" style="animation-delay: 0.1s">
            <h5 class="text-primary font-medium mb-4">AI数字人技术 · 亲情延续</h5>
            <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight mb-6">
              让爱延续，<br>
              <span class="digital-gradient">与逝去的亲人</span>重新连接
            </h1>
            <p class="text-neutral text-lg md:text-xl mb-8 max-w-lg">
              利用先进的AI技术一比一克隆逝去的亲人，重现他们的音容笑貌，通过视频聊天让您与亲人再次"相见"，诉说未尽的思念。
            </p>
            <div class="flex flex-col sm:flex-row gap-4">
              <a href="#process" class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-lg text-lg font-medium transition-all duration-300 shadow-lg hover:shadow-xl text-center">
                了解制作流程
              </a>
              <a href="#examples" class="border border-primary text-primary hover:bg-primary/5 px-8 py-4 rounded-lg text-lg font-medium transition-all duration-300 text-center">
                查看成功案例
              </a>
            </div>
            <div class="mt-10 flex items-center gap-4">
              <div class="flex -space-x-2">
                <img src="https://picsum.photos/seed/user1/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                <img src="https://picsum.photos/seed/user2/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                <img src="https://picsum.photos/seed/user3/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                <img src="https://picsum.photos/seed/user4/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
              </div>
              <div>
                <div class="flex items-center gap-1 text-yellow-400">
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                </div>
                <p class="text-sm text-neutral">已有1000+家庭选择我们</p>
              </div>
            </div>
          </div>
          
          <div class="lg:w-1/2 relative fade-in" style="animation-delay: 0.3s">
            <div class="relative rounded-2xl overflow-hidden shadow-2xl">
              <img src="https://picsum.photos/seed/digital1/800/600" alt="AI数字人视频通话" class="w-full h-auto rounded-2xl">
              <div class="absolute inset-0 gradient-overlay flex items-end">
                <div class="p-6 text-white">
                  <div class="flex items-center gap-3 mb-3">
   .........完整代码请登录后点击上方下载按钮下载查看