js+css实现调用ai大模型ai实现灵感点子头脑风暴发散图代码-html代码-BFW代码库

js+css实现调用ai大模型ai实现灵感点子头脑风暴发散图代码

代码语言：html

所属分类：其他

代码描述：js+css实现调用ai大模型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 src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f7f9fc;
            overflow: hidden;
        }
        /* 无限画布背景网格 */
        .infinite-grid {
            background-image: radial-gradient(#e2e8f0 1.5px, transparent 1.5px);
            background-size: 24px 24px;
        }
        /* 节点出现动画 */
        @keyframes popIn {
            0% { transform: scale(0); opacity: 0; }
            80% { transform: scale(1.1); opacity: 0.9; }
            100% { transform: scale(1); opacity: 1; }
        }
        .node-pop {
            animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
        /* 导线动画效果 */
        .dash-line {
            stroke-dasharray: 6;
            animation: dash 30s linear infinite;
        }
        @keyframes dash {
            to { stroke-dashoffset: -1000; }
        }
        /* 核心/激活节点金色发光 */
        .active-glow {
            box-shadow: 0 0 30px rgba(234, 179, 8, 0.45);
            background: radial-gradient(circle, #fef08a 0%, #fde047 100%);
            border: 2px solid #eab308;
        }
        /* 隐藏滚动条 */
        ::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>
<body class="w-screen h-screen select-none overflow-hidden infinite-grid">

    <!-- 1. 初始极简输入主界面 -->
    <div id="start-screen" class="absolute inset-0 flex flex-col items-center justify-center bg-slate-50/90 z-50 transition-all duration-700 ease-in-out">
        <div class="max-w-xl w-full px-6 text-center">
            <!-- 科技感 Logo -->
            <div class="mb-6 inline-flex items-center justify-center w-20 h-20 rounded-3xl bg-blue-600 text-white text-3xl shadow-lg shadow-blue-500/30 animate-bounce">
                <i class="fa-solid fa-brain"></i>
            </div>
            <h1 class="text-3xl font-bold text-slate-800 mb-2 tracking-tight">AI 灵感发散引擎</h1>
            <p class="text-slate-500 mb-8 text-sm">输入任意一个核心词或热点主题，开启无限脑洞的探索旅程</p>
            
            <!-- 输入框 -->
            <div class="relative flex items-center bg-white rounded-2xl shadow-xl shadow-slate-200/80 .........完整代码请登录后点击上方下载按钮下载查看