vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 10.10线上最新代码提交

Browse Source
This commit is contained in:
zdl
2025-10-11 16:16:02 +08:00
parent 4d0dc109bc
commit 864844a52b
3338 changed files with 460147 additions and 152745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

626
public/htmls/MOE模型.html Normal file
View File

@@ -0,0 +1,626 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>MOE模型概念分析报告</title>
<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800" rel="stylesheet" />
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/1d2b6c4f81.js" crossorigin="anonymous"></script>
<!-- Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
body {
font-family: 'Noto Sans SC', 'Inter', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #e2e8f0;
overflow-x: hidden;
}
.gradient-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.card-bg {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(100, 116, 139, 0.3);
}
.timeline-dot {
width: 12px;
height: 12px;
background: #3b82f6;
border-radius: 50%;
position: absolute;
left: -6px;
top: 6px;
}
.timeline-line {
position: absolute;
left: 0;
top: 18px;
bottom: -18px;
width: 1px;
background: rgba(100, 116, 139, 0.5);
}
.timeline-item:last-child .timeline-line {
display: none;
}
.table-container {
overflow-x: auto;
}
.particle-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.highlight-box {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
border-left: 4px solid #3b82f6;
}
.risk-box {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
border-left: 4px solid #ef4444;
}
.opportunity-box {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
border-left: 4px solid #10b981;
}
@media (max-width: 768px) {
.mobile-stack {
flex-direction: column;
}
.mobile-full {
width: 100%;
}
}
</style>
</head>
<body>
<div id="particles-js" class="particle-container"></div>
<div class="container mx-auto px-4 py-8 max-w-6xl">
<!-- 标题部分 -->
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold mb-4 gradient-text">MOE模型概念分析</h1>
<p class="text-lg text-slate-300 max-w-3xl mx-auto">
混合专家模型(MoE)已从技术验证进入规模化落地阶段，成为大模型降本增效的核心路径
</p>
</div>
<!-- 概念事件时间线 -->
<div class="card-bg rounded-xl p-6 mb-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-history mr-3 text-blue-400"></i>
概念事件时间线
</h2>
<div class="relative pl-8">
<div class="timeline-item relative pb-8">
<div class="timeline-dot"></div>
<div class="timeline-line"></div>
<div class="highlight-box rounded-lg p-4">
<div class="flex flex-wrap items-center justify-between">
<h3 class="text-lg font-semibold text-blue-300">2023年7月</h3>
<span class="text-sm bg-blue-900 text-blue-200 px-2 py-1 rounded">财通计算机路演</span>
</div>
<p class="mt-2">OpenAI被曝GPT-4采用<strong>1.8万亿参数MoE架构</strong>，首次将MoE推向主流视野</p>
</div>
</div>
<div class="timeline-item relative pb-8">
<div class="timeline-dot"></div>
<div class="timeline-line"></div>
<div class="highlight-box rounded-lg p-4">
<div class="flex flex-wrap items-center justify-between">
<h3 class="text-lg font-semibold text-blue-300">2024年1月</h3>
<span class="text-sm bg-blue-900 text-blue-200 px-2 py-1 rounded">MiniMax发布</span>
</div>
<p class="mt-2">国内首个MoE大模型abab6，<strong>激活参数仅37B</strong>却对标GPT-3.5</p>
</div>
</div>
<div class="timeline-item relative pb-8">
<div class="timeline-dot"></div>
<div class="timeline-line"></div>
<div class="highlight-box rounded-lg p-4">
<div class="flex flex-wrap items-center justify-between">
<h3 class="text-lg font-semibold text-blue-300">2024年5月</h3>
<span class="text-sm bg-blue-900 text-blue-200 px-2 py-1 rounded">华为发布</span>
</div>
<p class="mt-2"><strong>盘古Ultra MoE（7180亿参数）</strong>，全流程昇腾训练，打破GPU依赖</p>
</div>
</div>
<div class="timeline-item relative pb-8">
<div class="timeline-dot"></div>
<div class="timeline-line"></div>
<div class="highlight-box rounded-lg p-4">
<div class="flex flex-wrap items-center justify-between">
<h3 class="text-lg font-semibold text-blue-300">2025年2月</h3>
<span class="text-sm bg-blue-900 text-blue-200 px-2 py-1 rounded">字节/腾讯</span>
</div>
<p class="mt-2">字节开源COMET技术，<strong>MoE训练成本降40%</strong>；腾讯混元开源80B参数MoE模型</p>
</div>
</div>
<div class="timeline-item relative">
<div class="timeline-dot"></div>
<div class="highlight-box rounded-lg p-4">
<div class="flex flex-wrap items-center justify-between">
<h3 class="text-lg font-semibold text-blue-300">2025年6月</h3>
<span class="text-sm bg-blue-900 text-blue-200 px-2 py-1 rounded">华为云升级</span>
</div>
<p class="mt-2">盘古5.5升级<strong>7180亿MoE深度思考模型</strong>，昇腾CloudMatrix超节点实现<strong>35K tokens/s推理</strong></p>
</div>
</div>
</div>
</div>
<!-- 核心观点摘要 -->
<div class="card-bg rounded-xl p-6 mb-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-lightbulb mr-3 text-yellow-400"></i>
核心观点摘要
</h2>
<div class="grid md:grid-cols-3 gap-4">
<div class="opportunity-box rounded-lg p-4">
<h3 class="text-lg font-semibold text-green-300 mb-2">阶段判断</h3>
<p>MoE已从"技术验证"进入<strong>"规模化落地"阶段</strong>，成为大模型降本增效的核心路径</p>
</div>
<div class="opportunity-box rounded-lg p-4">
<h3 class="text-lg font-semibold text-green-300 mb-2">核心驱动力</h3>
<p><strong>算力瓶颈倒逼架构创新</strong>——通过稀疏激活实现参数规模与计算成本的脱钩</p>
</div>
<div class="opportunity-box rounded-lg p-4">
<h3 class="text-lg font-semibold text-green-300 mb-2">未来潜力</h3>
<p><strong>2025年将成为MoE商业化元年</strong>，国产芯片+开源生态将重塑全球AI算力格局</p>
</div>
</div>
</div>
<!-- 核心逻辑与市场认知分析 -->
<div class="card-bg rounded-xl p-6 mb-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-brain mr-3 text-purple-400"></i>
核心逻辑与市场认知分析
</h2>
<div class="mb-6">
<h3 class="text-xl font-semibold mb-4 text-blue-300">核心驱动力</h3>
<div class="grid md:grid-cols-2 gap-4">
<div class="highlight-box rounded-lg p-4">
<h4 class="font-semibold mb-2 text-blue-200">技术突破</h4>
<ul class="list-disc pl-5 space-y-2">
<li><strong>稀疏激活效率</strong>：DeepSeek-V3通过Top-2专家路由，激活参数占比仅15.6%却达到70B稠密模型性能</li>
<li><strong>国产算力适配</strong>：华为昇腾通过PTX级优化，将MoE训练MFU从30%提升至41%</li>
</ul>
</div>
<div class="highlight-box rounded-lg p-4">
<h4 class="font-semibold mb-2 text-blue-200">成本拐点</h4>
<ul class="list-disc pl-5 space-y-2">
<li><strong>训练成本</strong>：字节COMET技术使MoE训练效率提升1.7倍，单次训练成本降至560万美元</li>
<li><strong>推理成本</strong>：腾讯混元80B MoE模型激活参数13B，推理成本较稠密模型降低83%</li>
</ul>
</div>
</div>
</div>
<div class="mb-6">
<h3 class="text-xl font-semibold mb-4 text-blue-300">市场热度与情绪</h3>
<div class="grid md:grid-cols-2 gap-4">
<div class="highlight-box rounded-lg p-4">
<h4 class="font-semibold mb-2 text-blue-200">研报密度</h4>
<p>2024Q2以来，<strong>12篇头部研报</strong>将MoE列为"大模型降本唯一路径"（华泰/东吴/安信）</p>
</div>
<div class="highlight-box rounded-lg p-4">
<h4 class="font-semibold mb-2 text-blue-200">情绪分化</h4>
<ul class="list-disc pl-5 space-y-2">
<li><strong>乐观派</strong>：认为MoE将复制"光伏单晶替代多晶"路径，2025年渗透率超70%</li>
<li><strong>谨慎派</strong>：担忧专家负载不均导致性能波动，需验证长期稳定性</li>
</ul>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-4 text-blue-300">预期差分析</h3>
<div class="highlight-box rounded-lg p-4">
<h4 class="font-semibold mb-2 text-blue-200">被忽略的关键点</h4>
<ul class="list-disc pl-5 space-y-2">
<li><strong>通信开销陷阱</strong>：MoE需All-to-All通信，但华为通过EP32+TP4混合并行将通信开销压至&lt;2%</li>
<li><strong>国产芯片机会</strong>：市场低估昇腾910B对MoE的支持，2025年昇腾出货量预计达60万片</li>
</ul>
</div>
</div>
</div>
<!-- 关键催化剂与未来发展路径 -->
<div class="card-bg rounded-xl p-6 mb-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-rocket mr-3 text-green-400"></i>
关键催化剂与未来发展路径
</h2>
<div class="mb-6">
<h3 class="text-xl font-semibold mb-4 text-green-300">近期催化剂（3-6个月）</h3>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="border-b border-slate-700">
<th class="py-2 px-4 font-semibold text-green-200">时间</th>
<th class="py-2 px-4 font-semibold text-green-200">事件</th>
<th class="py-2 px-4 font-semibold text-green-200">影响逻辑</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-medium text-blue-300">2025Q3</td>
<td class="py-3 px-4">华为昇腾910C发布</td>
<td class="py-3 px-4">支持FP8精度MoE训练，成本再降30%</td>
</tr>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-medium text-blue-300">2025Q3</td>
<td class="py-3 px-4">腾讯混元MoE开源</td>
<td class="py-3 px-4">推动中小厂商采用，加速生态扩散</td>
</tr>
<tr>
<td class="py-3 px-4 font-medium text-blue-300">2025Q4</td>
<td class="py-3 px-4">字节跳动UltraMem架构落地</td>
<td class="py-3 px-4">推理成本降83%，冲击API定价体系</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-4 text-green-300">长期发展路径</h3>
<div class="grid md:grid-cols-2 gap-4">
<div class="opportunity-box rounded-lg p-4">
<h4 class="font-semibold mb-2 text-green-200">2025-2026</h4>
<p>MoE成为大模型标配（类似Transformer），国产芯片+开源框架主导中低端市场</p>
</div>
<div class="opportunity-box rounded-lg p-4">
<h4 class="font-semibold mb-2 text-green-200">2027-2028</h4>
<p>异构MoE（动态专家数量）+LPU专用芯片成熟，单位算力成本降至当前10%</p>
</div>
</div>
</div>
</div>
<!-- 产业链与核心公司深度剖析 -->
<div class="card-bg rounded-xl p-6 mb-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-network-wired mr-3 text-indigo-400"></i>
产业链与核心公司深度剖析
</h2>
<div class="mb-6">
<h3 class="text-xl font-semibold mb-4 text-indigo-300">产业链图谱</h3>
<div class="bg-slate-800 rounded-lg p-4">
<div class="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
<div class="text-center">
<div class="bg-blue-900 rounded-lg px-4 py-2 mb-2">
<p class="font-semibold text-blue-200">上游：算力芯片</p>
</div>
<div class="space-y-2">
<p class="text-sm">昇腾910B</p>
<p class="text-sm">寒武纪MLU370</p>
</div>
</div>
<div class="text-2xl text-blue-400">
<i class="fas fa-arrow-right"></i>
</div>
<div class="text-center">
<div class="bg-purple-900 rounded-lg px-4 py-2 mb-2">
<p class="font-semibold text-purple-200">中游：MoE框架</p>
</div>
<div class="space-y-2">
<p class="text-sm">华为盘古MoE</p>
<p class="text-sm">腾讯混元MoE</p>
</div>
</div>
<div class="text-2xl text-purple-400">
<i class="fas fa-arrow-right"></i>
</div>
<div class="text-center">
<div class="bg-green-900 rounded-lg px-4 py-2 mb-2">
<p class="font-semibold text-green-200">下游：应用场景</p>
</div>
<div class="space-y-2">
<p class="text-sm">政务AI</p>
<p class="text-sm">社交AI</p>
</div>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-4 text-indigo-300">核心玩家对比</h3>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="border-b border-slate-700">
<th class="py-2 px-4 font-semibold text-indigo-200">公司</th>
<th class="py-2 px-4 font-semibold text-indigo-200">技术路线</th>
<th class="py-2 px-4 font-semibold text-indigo-200">进展验证</th>
<th class="py-2 px-4 font-semibold text-indigo-200">风险点</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-medium text-blue-300">华为</td>
<td class="py-3 px-4">昇腾+盘古Ultra MoE</td>
<td class="py-3 px-4">CloudMatrix超节点35K tokens/s</td>
<td class="py-3 px-4">生态封闭，外部适配慢</td>
</tr>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-medium text-blue-300">腾讯</td>
<td class="py-3 px-4">混元80B MoE开源</td>
<td class="py-3 px-4">魔搭社区首发，开发者超1600万</td>
<td class="py-3 px-4">商业化场景待验证</td>
</tr>
<tr class="border-b border-slate-800">
<td class="py-3 px-4 font-medium text-blue-300">字节</td>
<td class="py-3 px-4">COMET优化+UltraMem</td>
<td class="py-3 px-4">训练成本降40%（已开源）</td>
<td class="py-3 px-4">与英伟达生态竞争</td>
</tr>
<tr>
<td class="py-3 px-4 font-medium text-blue-300">DeepSeek</td>
<td class="py-3 px-4">MLA+MoE</td>
<td class="py-3 px-4">236B模型激活21B（开源）</td>
<td class="py-3 px-4">依赖海外芯片</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 潜在风险与挑战 -->
<div class="card-bg rounded-xl p-6 mb-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-exclamation-triangle mr-3 text-red-400"></i>
潜在风险与挑战
</h2>
<div class="grid md:grid-cols-3 gap-4">
<div class="risk-box rounded-lg p-4">
<h3 class="text-lg font-semibold text-red-300 mb-3">技术风险</h3>
<ul class="list-disc pl-5 space-y-2">
<li><strong>专家崩塌</strong>：负载不均可能导致90%token流向单一专家</li>
<li><strong>长文本瓶颈</strong>：当前MoE在百万级上下文下仍存O(n²)复杂度问题</li>
</ul>
</div>
<div class="risk-box rounded-lg p-4">
<h3 class="text-lg font-semibold text-red-300 mb-3">商业化风险</h3>
<ul class="list-disc pl-5 space-y-2">
<li><strong>API价格战</strong>：可能引发"0.1元/百万tokens"恶性竞争</li>
<li><strong>场景适配</strong>：政务/医疗等高合规场景对MoE的可解释性要求未满足</li>
</ul>
</div>
<div class="risk-box rounded-lg p-4">
<h3 class="text-lg font-semibold text-red-300 mb-3">政策与竞争风险</h3>
<ul class="list-disc pl-5 space-y-2">
<li><strong>美国制裁</strong>：若限制EDA工具用于昇腾芯片设计，国产MoE算力链或中断</li>
</ul>
</div>
</div>
</div>
<!-- 综合结论与投资启示 -->
<div class="card-bg rounded-xl p-6 mb-8 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-chart-line mr-3 text-yellow-400"></i>
综合结论与投资启示
</h2>
<div class="mb-6">
<h3 class="text-xl font-semibold mb-4 text-yellow-300">阶段判断</h3>
<div class="opportunity-box rounded-lg p-4">
<p class="text-lg">当前处于<strong>"技术红利兑现期"</strong>，类似2020年光伏PERC电池——<strong>成本曲线陡峭下降+渗透率快速提升</strong></p>
</div>
</div>
<div class="mb-6">
<h3 class="text-xl font-semibold mb-4 text-yellow-300">投资方向</h3>
<div class="space-y-3">
<div class="opportunity-box rounded-lg p-4">
<h4 class="font-semibold mb-2 text-green-200">最确定赛道</h4>
<p>国产算力芯片（昇腾/寒武纪）+ MoE框架服务商（华为云/腾讯云）</p>
</div>
<div class="opportunity-box rounded-lg p-4">
<h4 class="font-semibold mb-2 text-green-200">弹性标的</h4>
<p>交换机厂商（瑞斯康达/共进股份）——MoE推动800G光模块需求</p>
</div>
<div class="opportunity-box rounded-lg p-4">
<h4 class="font-semibold mb-2 text-green-200">预期差机会</h4>
<p>边缘端MoE（云天励飞1.8B模型）——未被定价的"AI PC"场景</p>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-4 text-yellow-300">关键跟踪指标</h3>
<div class="grid md:grid-cols-3 gap-4">
<div class="highlight-box rounded-lg p-4">
<h4 class="font-semibold mb-2 text-blue-200">昇腾910C量产进度</h4>
<p>2025Q3若达30万片/季度，将确认国产替代拐点</p>
</div>
<div class="highlight-box rounded-lg p-4">
<h4 class="font-semibold mb-2 text-blue-200">腾讯混元MoE调用量</h4>
<p>若月活超5000万，标志开源生态爆发</p>
</div>
<div class="highlight-box rounded-lg p-4">
<h4 class="font-semibold mb-2 text-blue-200">字节UltraMem API定价</h4>
<p>若低于0.5元/百万tokens，将触发行业洗牌</p>
</div>
</div>
</div>
<div class="mt-6 p-4 rounded-lg bg-gradient-to-r from-blue-900 to-purple-900">
<p class="text-lg font-semibold text-center text-white">
MoE不是主题炒作，而是<strong>AI算力革命的"单晶时刻"</strong>。<br>
<strong>2025年Q3前</strong>是布局窗口期，<strong>优先配置国产算力链+MoE框架龙头</strong>。
</p>
</div>
</div>
<!-- 关联股票表格 -->
<div class="card-bg rounded-xl p-6 shadow-xl">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-table mr-3 text-cyan-400"></i>
关联股票
</h2>
<div class="table-container">
<table class="w-full text-left">
<thead>
<tr class="border-b border-slate-700">
<th class="py-3 px-4 font-semibold text-cyan-200">股票名称</th>
<th class="py-3 px-4 font-semibold text-cyan-200">项目</th>
<th class="py-3 px-4 font-semibold text-cyan-200">技术/产品</th>
<th class="py-3 px-4 font-semibold text-cyan-200">应用领域/合作方</th>
<th class="py-3 px-4 font-semibold text-cyan-200">投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-800 hover:bg-slate-800/50">
<td class="py-3 px-4 font-medium text-blue-300">云天励飞</td>
<td class="py-3 px-4">边缘端硬件在线微调学习</td>
<td class="py-3 px-4">MoE大模型、1.8B轻量化模型</td>
<td class="py-3 px-4">边缘计算</td>
<td class="py-3 px-4">公司通过能力蒸馏研发的1.8B模型和MoE大模型，边缘应用性能优于同参数模型，支持大模型在边缘设备落地</td>
</tr>
<tr class="border-b border-slate-800 hover:bg-slate-800/50">
<td class="py-3 px-4 font-medium text-blue-300">东方通</td>
<td class="py-3 px-4">深度安全大模型</td>
<td class="py-3 px-4">MoE混合专家模型、LLM+AI Agent框架</td>
<td class="py-3 px-4">网络安全</td>
<td class="py-3 px-4">基于MoE架构的深度安全大模型，在LLM+AI Agent框架下快速部署AI安全能力</td>
</tr>
<tr class="border-b border-slate-800 hover:bg-slate-800/50">
<td class="py-3 px-4 font-medium text-blue-300">汤姆猫</td>
<td class="py-3 px-4">AI情感陪伴机器人</td>
<td class="py-3 px-4">MOE混合专家架构</td>
<td class="py-3 px-4">西湖心辰、豆包、DeepSeek</td>
<td class="py-3 px-4">AI情感陪伴机器人采用MOE架构，整合西湖心辰定制模型及豆包、DeepSeek等模型能力，提升产品性能</td>
</tr>
<tr class="border-b border-slate-800 hover:bg-slate-800/50">
<td class="py-3 px-4 font-medium text-blue-300">瑞斯康达</td>
<td class="py-3 px-4">AI大模型降本</td>
<td class="py-3 px-4">三层交换机、数据中心交换机、OLT</td>
<td class="py-3 px-4">通信设备</td>
<td class="py-3 px-4">MOE技术推动AI大模型降本，公司发布多款交换机产品迎接发展机遇</td>
</tr>
<tr class="hover:bg-slate-800/50">
<td class="py-3 px-4 font-medium text-blue-300">共进股份</td>
<td class="py-3 px-4">AI大模型降本</td>
<td class="py-3 px-4">园区交换机、SMB交换机</td>
<td class="py-3 px-4">企业网络</td>
<td class="py-3 px-4">MOE技术推动AI大模型降本，公司交换机产品覆盖园区和中小企业市场</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 粒子背景 -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3/tsparticles.bundle.min.js"></script>
<script>
tsParticles.load("particles-js", {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: ["#3b82f6", "#8b5cf6", "#10b981"]
},
shape: {
type: "circle"
},
opacity: {
value: 0.5,
random: false
},
size: {
value: 3,
random: true
},
line_linked: {
enable: true,
distance: 150,
color: "#64748b",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 2,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "grab"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 1
}
},
push: {
particles_nb: 4
}
}
},
retina_detect: true
});
</script>
</body>
</html>
```