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-colo.........完整代码请登录后点击上方下载按钮下载查看