tailwind+webgl实现炫酷ai平台官网代码-html代码-BFW代码库

tailwind+webgl实现炫酷ai平台官网代码

代码语言：html

代码描述：tailwind+webgl实现炫酷ai平台官网代码

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
  <style>
    body, html {
      font-family: 'Inter', system-ui, sans-serif;
      background: #111;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      min-height: 100vh;
    }
    h1, h2, h3, h4 {
      font-family: 'Manrope', sans-serif !important;
      letter-spacing: -0.03em !important;
    }
    .title-bold {
      font-weight: 600 !important;
    }
    .title-light {
      font-weight: 200 !important;
    }
    #shader-canvas {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      display: block;
      z-index: 0;
      background: #111;
    }
    .glass-effect {
      backdrop-filter: blur(14px) brightness(0.91);
      -webkit-backdrop-filter: blur(14px) brightness(0.91);
    }
    .gradient-text {
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }
    .floating-animation {
      animation: float 6s ease-in-out infinite;
    }
    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(2deg); }
    }
    .pulse-glow {
      animation: pulse-glow 3s ease-in-out infinite;
    }
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
      50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.6); }
    }
    .feature-icon {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
    }
    .logo-circle {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      border: 2px solid rgba(59, 130, 246, 0.7);
      position: relative;
      background: transparent;
    }
 .........完整代码请登录后点击上方下载按钮下载查看