tailwindcss布局实现pc端简洁风格ai全息数字人落地页官网介绍代码-html代码-BFW代码库

代码语言：html

代码描述：tailwindcss布局实现pc端简洁风格ai全息数字人落地页官网介绍代码

代码标签： tailwind 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>Holosapiens - 全球领先的多模态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: '#0B4CD1',
            secondary: '#7B2FFD',
            accent: '#00E5FF',
            dark: '#0A1124',
            light: '#F0F4FF',
            'neutral-dark': '#1E293B',
            'neutral-light': '#E2E8F0'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
          animation: {
            'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
            'float': 'float 6s ease-in-out infinite',
            'glow': 'glow 2s ease-in-out infinite alternate',
            'scan': 'scan 2s ease-in-out infinite'
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-20px)' }
            },
            glow: {
              '0%': { boxShadow: '0 0 5px rgba(0, 229, 255, 0.5), 0 0 10px rgba(0, 229, 255, 0.3)' },
              '100%': { boxShadow: '0 0 10px rgba(0, 229, 255, 0.8), 0 0 20px rgba(0, 229, 255, 0.5), 0 0 30px rgba(0, 229, 255, 0.3)' }
            },
            scan: {
              '0%': { backgroundPosition: '0% 0%' },
              '100%': { backgroundPosition: '0% 100%' }
            }
          }
        },
      }
    }
  </script>
  
  <!-- 自定义样式 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-gradient {
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .bg-grid {
        background-image: 
          linear-gradient(rgba(11, 76, 209, 0.1) 1px, transparent 1px),
          linear-gradient(90deg, rgba(11, 76, 209, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
      }
      .hologram-effect {
        position: relative;
       
      }
      .hologram-effect::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to bottom,
          transparent 0%,
          rgba(0, 229, 255, 0.1) 50%,
          transparent 100%
        );
        background-size: 100% 200%;
        animation: scan 4s linear infinite;
        pointer-events: none;
      }
      .glass-effect {
        backdrop-filter: blur(12px);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .neon-border {
        box-shadow: 0 0 5px rgba(0, 229, 255, 0.7), 
                    inset 0 0 5px rgba(0, 229, 255, 0.5);
      }
      .perspective {
        perspective: 1000px;
      }
      .preserve-3d {
        transform-style: preserve-3d;
      }
    }
  </style>
</head>

<body class="font-inter bg-dark text-white antialiased overflow-x-hidden">
  <!-- 背景装饰 -->
  <div class="fixed inset-0 bg-grid opacity-30 z-0"></div>
  <div class="fixed top-0 left-0 w-full h-96 bg-gradient-to-b from-primary/20 to-transparent z-0"></div>
  <div class="fixed bottom-0 left-0 w-full h-96 bg-gradient-to-t from-secondary/20 to-transparent z-0"></div>
  
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 md:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16 md:h-20">
        <!-- Logo -->
        <a href="#" class="flex items-center space-x-2 z-10">
          <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center neon-border">
            <i class="fa fa-user-circle text-accent text-xl"></i>
          </div>
          <span class="text-xl font-bold bg-gradient-to-r from-accent to-secondary text-gradient">Holosapiens</span>
        </a>
        
        <!-- 桌面导航 -->
        <nav class="hidden md:flex items-center space-x-8 z-10">
          <a href="#features" class="text-white/80 hover:text-accent transition-colors">核心功能</a>
          <a href="#technology" class="text-white/80 hover:text-accent transition-colors">技术优势</a>
          <a href="#applications" class="text-white/80 hover:text-accent transition-colors">应用场景</a>
          <a href="#cases" class="text-white/80 hover:text-accent transition-colors">客户案例</a>
          <a href="#pricing" class="text-white/80 hover:text-accent transition-colors">定价方案</a>
        </nav>
        
        <!-- 按钮组 -->
        <div class="hidden md:flex items-center space-x-4 z-10">
          <a href="#" class="text-accent hover:text-accent/80 transition-colors">登录</a>
          <a href="#" class="px-5 py-2 bg-gradient-to-r from-primary to-secondary hover:opacity-90 text-white rounded-lg transition-all shadow-lg hover:shadow-accent/20 neon-border">
            申请试用
          </a>
        </div>
        
        <!-- 移动端菜单按钮 -->
        <button id="menu-toggle" class="md:hidden text-white hover:text-accent transition-colors z-10">
          <i class="fa fa-bars text-2xl"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" clas.........完整代码请登录后点击上方下载按钮下载查看