Files
vf_react/public/htmls/空中成像.html
2025-10-11 16:16:02 +08:00

523 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>空中成像技术行业洞察</title>
<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800" 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>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/1d2b6c4f81.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3/tsparticles.bundle.min.js"></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 50%, #334155 100%);
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.gradient-text {
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.45);
}
.timeline-dot {
width: 12px;
height: 12px;
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
border-radius: 50%;
position: absolute;
left: -6px;
top: 6px;
}
.table-container {
overflow-x: auto;
}
@media (max-width: 768px) {
.table-container {
overflow-x: scroll;
}
}
</style>
</head>
<body>
<div id="particles-js"></div>
<div class="container mx-auto px-4 py-8 max-w-7xl">
<!-- 标题区域 -->
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold gradient-text mb-4">空中成像技术行业洞察</h1>
<p class="text-gray-300 text-lg">从技术萌芽到商业化落地的全景分析</p>
</div>
<!-- 概念概览卡片 -->
<div class="glass-effect rounded-2xl p-6 mb-8 card-hover">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-lightbulb text-white"></i>
</div>
<h2 class="text-2xl font-bold text-white">核心观点摘要</h2>
</div>
<p class="text-gray-200 leading-relaxed">
空中成像正处于<strong class="text-blue-300">"技术验证→场景落地"临界点</strong>,核心驱动力是<strong class="text-purple-300">车载智能座舱升级</strong>HUD替代+无接触交互),而非早期医疗/展览的噱头应用。2024Q4华为问界M9的订单落地将是<strong class="text-pink-300">商业化拐点信号</strong>,但需警惕量产成本和车规认证风险。
</p>
</div>
<!-- 概念事件时间线 -->
<div class="glass-effect rounded-2xl p-6 mb-8">
<div class="flex items-center mb-6">
<div class="w-10 h-10 bg-gradient-to-r from-green-500 to-teal-500 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-history text-white"></i>
</div>
<h2 class="text-2xl font-bold text-white">概念发展历程</h2>
</div>
<div class="space-y-6">
<div class="relative pl-8">
<div class="timeline-dot"></div>
<div class="border-l-2 border-gray-600 pl-6">
<h3 class="text-lg font-semibold text-green-300 mb-2">技术萌芽期2017-2020</h3>
<p class="text-gray-300">宝马、长城、丰田等车企率先展示空中成像概念车技术以日本ASKA3D的AI板为主但成本高昂每平米数万元</p>
</div>
</div>
<div class="relative pl-8">
<div class="timeline-dot"></div>
<div class="border-l-2 border-gray-600 pl-6">
<h3 class="text-lg font-semibold text-blue-300 mb-2">国产化突破2021-2023</h3>
<p class="text-gray-300">东超科技伟时电子参股4%突破负折射平板透镜DCT-plate技术成本降至<strong class="text-yellow-300">1/3</strong>2023年上海车展江淮、奇瑞等车企实车搭载。</p>
</div>
</div>
<div class="relative pl-8">
<div class="timeline-dot"></div>
<div class="border-l-2 border-gray-600 pl-6">
<h3 class="text-lg font-semibold text-purple-300 mb-2">政策催化2024年9月</h3>
<p class="text-gray-300">华为智选车厂商申请空中成像专利比亚迪公布浮空显示装置专利2025年7月技术路径转向<strong class="text-pink-300">车载HUD+手势交互</strong></p>
</div>
</div>
<div class="relative pl-8">
<div class="timeline-dot"></div>
<div class="border-l-2 border-gray-600 pl-6">
<h3 class="text-lg font-semibold text-red-300 mb-2">商业化落地2024Q4</h3>
<p class="text-gray-300">华为问界M9计划搭载东超科技方案<strong class="text-orange-300">单车价值量4000-4500元</strong>后排双屏配置可达1.2万元2027年市场规模预测<strong class="text-cyan-300">65亿元</strong>(国联汽车数据)。</p>
</div>
</div>
</div>
</div>
<!-- 核心逻辑分析 -->
<div class="grid md:grid-cols-2 gap-6 mb-8">
<div class="glass-effect rounded-2xl p-6 card-hover">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-rocket text-white"></i>
</div>
<h2 class="text-xl font-bold text-white">核心驱动力</h2>
</div>
<ul class="space-y-3 text-gray-300">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span><strong class="text-yellow-300">技术突破</strong>DCT-plate透镜加工精度达80-120纳米级东超科技解决早期AI板成本高、体积大的痛点。</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span><strong class="text-blue-300">需求刚性</strong>智能座舱多屏化趋势下传统HUDWHUD向AR-HUD升级空中成像提供无介质悬浮显示差异化方案。</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span><strong class="text-purple-300">政策背书</strong>2024年《上海市低空经济行动方案》明确支持"载人交通等商业场景"空中成像技术可延伸至eVTOL座舱显示。</span>
</li>
</ul>
</div>
<div class="glass-effect rounded-2xl p-6 card-hover">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-gradient-to-r from-red-500 to-pink-500 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-exclamation-triangle text-white"></i>
</div>
<h2 class="text-xl font-bold text-white">预期差分析</h2>
</div>
<ul class="space-y-3 text-gray-300">
<li class="flex items-start">
<i class="fas fa-times-circle text-red-400 mt-1 mr-2"></i>
<span><strong class="text-orange-300">交互精度瓶颈</strong>东超科技方案需2mm级手势识别精度当前车载红外传感器仅支持5-10mm存在技术代差</span>
</li>
<li class="flex items-start">
<i class="fas fa-times-circle text-red-400 mt-1 mr-2"></i>
<span><strong class="text-pink-300">成本敏感点</strong>DCT-plate量产成本需降至每平米万元以内但当前玻璃制透镜仍占成本60%。</span>
</li>
</ul>
</div>
</div>
<!-- 产业链分析 -->
<div class="glass-effect rounded-2xl p-6 mb-8">
<div class="flex items-center mb-6">
<div class="w-10 h-10 bg-gradient-to-r from-indigo-500 to-blue-500 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-sitemap text-white"></i>
</div>
<h2 class="text-2xl font-bold text-white">产业链与核心公司</h2>
</div>
<div class="bg-gray-800 bg-opacity-50 rounded-lg p-4 mb-6">
<div class="flex flex-wrap justify-center items-center gap-4 text-center">
<div class="bg-blue-600 bg-opacity-30 px-4 py-2 rounded-lg">
<p class="text-blue-300 font-semibold">上游</p>
<p class="text-white text-sm">光学材料</p>
</div>
<i class="fas fa-arrow-right text-gray-400"></i>
<div class="bg-purple-600 bg-opacity-30 px-4 py-2 rounded-lg">
<p class="text-purple-300 font-semibold">中游</p>
<p class="text-white text-sm">透镜制造/模组集成</p>
</div>
<i class="fas fa-arrow-right text-gray-400"></i>
<div class="bg-pink-600 bg-opacity-30 px-4 py-2 rounded-lg">
<p class="text-pink-300 font-semibold">下游</p>
<p class="text-white text-sm">整车厂/场景应用</p>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="border-b border-gray-700">
<th class="py-3 px-4 text-gray-300 font-semibold">公司</th>
<th class="py-3 px-4 text-gray-300 font-semibold">角色</th>
<th class="py-3 px-4 text-gray-300 font-semibold">进展</th>
<th class="py-3 px-4 text-gray-300 font-semibold">风险</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-700 hover:bg-gray-800 hover:bg-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">东超科技</td>
<td class="py-3 px-4 text-gray-300">技术龙头</td>
<td class="py-3 px-4 text-gray-300">华为问界M9独家供应商已量产</td>
<td class="py-3 px-4 text-red-300">过度依赖华为单一客户</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-800 hover:bg-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">凯盛科技</td>
<td class="py-3 px-4 text-gray-300">材料供应商</td>
<td class="py-3 px-4 text-gray-300">反射膜批量供货毛利率30%+</td>
<td class="py-3 px-4 text-red-300">技术替代(树脂透镜降本)</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-800 hover:bg-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">华阳集团</td>
<td class="py-3 px-4 text-gray-300">HUD集成商</td>
<td class="py-3 px-4 text-gray-300">问界M9 HUD模组市占率70%</td>
<td class="py-3 px-4 text-red-300">AR-HUD技术路线竞争</td>
</tr>
<tr class="hover:bg-gray-800 hover:bg-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">伟时电子</td>
<td class="py-3 px-4 text-gray-300">概念关联</td>
<td class="py-3 px-4 text-gray-300">参股东超科技4%,无直接订单</td>
<td class="py-3 px-4 text-red-300">股价已透支参股价值</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 风险分析 -->
<div class="glass-effect rounded-2xl p-6 mb-8">
<div class="flex items-center mb-6">
<div class="w-10 h-10 bg-gradient-to-r from-red-500 to-orange-500 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-shield-alt text-white"></i>
</div>
<h2 class="text-2xl font-bold text-white">潜在风险与挑战</h2>
</div>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-red-900 bg-opacity-20 border border-red-700 rounded-lg p-4">
<h3 class="text-red-300 font-semibold mb-2 flex items-center">
<i class="fas fa-microchip mr-2"></i>技术风险
</h3>
<p class="text-gray-300 text-sm">DCT-plate透镜纳米级加工良率<60%导致量产延期</p>
</div>
<div class="bg-orange-900 bg-opacity-20 border border-orange-700 rounded-lg p-4">
<h3 class="text-orange-300 font-semibold mb-2 flex items-center">
<i class="fas fa-handshake mr-2"></i>商业化风险
</h3>
<p class="text-gray-300 text-sm">车载场景需通过AEC-Q100车规认证当前仅完成ISO 26262功能安全预评估。</p>
</div>
<div class="bg-yellow-900 bg-opacity-20 border border-yellow-700 rounded-lg p-4">
<h3 class="text-yellow-300 font-semibold mb-2 flex items-center">
<i class="fas fa-fist-raised mr-2"></i>竞争风险
</h3>
<p class="text-gray-300 text-sm">日本ASKA3D树脂透镜成本低40%若2025年国产化可能挤压玻璃透镜份额。</p>
</div>
<div class="bg-purple-900 bg-opacity-20 border border-purple-700 rounded-lg p-4">
<h3 class="text-purple-300 font-semibold mb-2 flex items-center">
<i class="fas fa-exclamation-circle mr-2"></i>信息矛盾
</h3>
<p class="text-gray-300 text-sm">国联汽车预测2027年市场规模65亿元但东超科技路演称"医疗场景订单占比>50%"。</p>
</div>
</div>
</div>
<!-- 投资启示 -->
<div class="glass-effect rounded-2xl p-6 mb-8">
<div class="flex items-center mb-6">
<div class="w-10 h-10 bg-gradient-to-r from-green-500 to-teal-500 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-chart-line text-white"></i>
</div>
<h2 class="text-2xl font-bold text-white">投资启示</h2>
</div>
<div class="bg-gradient-to-r from-green-900 to-teal-900 bg-opacity-20 rounded-lg p-6">
<h3 class="text-green-300 font-semibold mb-3">阶段判断</h3>
<p class="text-gray-200 mb-4">处于"主题炒作→订单验证"过渡期华为问界M9是关键试金石。</p>
<h3 class="text-green-300 font-semibold mb-3">投资方向</h3>
<ul class="space-y-2 text-gray-200 mb-4">
<li class="flex items-start">
<i class="fas fa-arrow-right text-green-400 mt-1 mr-2"></i>
<span><strong class="text-blue-300">上游材料</strong>:凯盛科技(反射膜)——技术壁垒高+毛利率30%+</span>
</li>
<li class="flex items-start">
<i class="fas fa-arrow-right text-green-400 mt-1 mr-2"></i>
<span><strong class="text-purple-300">中游模组</strong>华阳集团HUD集成——绑定华为+AR-HUD渗透率提升</span>
</li>
<li class="flex items-start">
<i class="fas fa-arrow-right text-green-400 mt-1 mr-2"></i>
<span><strong class="text-red-300">回避标的</strong>:伟时电子(参股逻辑已透支)</span>
</li>
</ul>
<h3 class="text-green-300 font-semibold mb-3">跟踪指标</h3>
<ul class="space-y-2 text-gray-200">
<li class="flex items-start">
<i class="fas fa-eye text-cyan-400 mt-1 mr-2"></i>
<span>东超科技问界M9订单量2024Q4财报验证</span>
</li>
<li class="flex items-start">
<i class="fas fa-eye text-cyan-400 mt-1 mr-2"></i>
<span>树脂透镜成本曲线日本ASKA3D 2025年扩产计划</span>
</li>
<li class="flex items-start">
<i class="fas fa-eye text-cyan-400 mt-1 mr-2"></i>
<span>车规认证进度AEC-Q100证书发布时间</span>
</li>
</ul>
</div>
</div>
<!-- 关联股票表格 -->
<div class="glass-effect rounded-2xl p-6">
<div class="flex items-center mb-6">
<div class="w-10 h-10 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-lg flex items-center justify-center mr-3">
<i class="fas fa-table text-white"></i>
</div>
<h2 class="text-2xl font-bold text-white">关联股票</h2>
</div>
<div class="table-container">
<table class="w-full text-left">
<thead>
<tr class="border-b border-gray-700">
<th class="py-3 px-4 text-gray-300 font-semibold">股票名称</th>
<th class="py-3 px-4 text-gray-300 font-semibold">行业</th>
<th class="py-3 px-4 text-gray-300 font-semibold">项目</th>
<th class="py-3 px-4 text-gray-300 font-semibold">产业链</th>
<th class="py-3 px-4 text-gray-300 font-semibold">投资逻辑</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-700 hover:bg-gray-800 hover:bg-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">伟时电子</td>
<td class="py-3 px-4 text-gray-300 text-sm">背光显示模组、VR、空中成像、华为汽车</td>
<td class="py-3 px-4 text-gray-300 text-sm">东超科技自主研发的可交互空中成像技术</td>
<td class="py-3 px-4 text-gray-300 text-sm">空中成像技术领军企业</td>
<td class="py-3 px-4 text-gray-300 text-sm">东超科技是空中成像技术领军企业其技术处于国际领先地位应用于车载PGU高亮度激光投影模块及穿戴式AR眼镜与视网膜扫描成像技术等。</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-800 hover:bg-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">朗迪集团</td>
<td class="py-3 px-4 text-gray-300 text-sm">微型激光投影、空调风叶、先进封装</td>
<td class="py-3 px-4 text-gray-300 text-sm">风机风叶行业龙头持有甬矽电子7.6%股权</td>
<td class="py-3 px-4 text-gray-300 text-sm">车用PGU高亮度激光投影模块、AR眼镜与视网膜扫描成像技术</td>
<td class="py-3 px-4 text-gray-300 text-sm">公司主营家用空调风叶、机械风机、复合材料上半年净利润同比增长74.92%核心技术应用于车用PGU高亮度激光投影模块及AR眼镜与视网膜扫描成像技术。</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-800 hover:bg-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">盈趣科技</td>
<td class="py-3 px-4 text-gray-300 text-sm">无介质空气成像技术</td>
<td class="py-3 px-4 text-gray-300 text-sm">像航科技无介质浮空投影和交互技术</td>
<td class="py-3 px-4 text-gray-300 text-sm">军工安全、车载显示、医疗成像、智能家居</td>
<td class="py-3 px-4 text-gray-300 text-sm">像航科技通过自主研发新型光学材料和技术,实现无介质浮空投影和交互,产品应用于军工安全、车载显示等领域,并与华为合作推动智能座舱解决方案。</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-800 hover:bg-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">丝路视觉</td>
<td class="py-3 px-4 text-gray-300 text-sm">CG视觉场景综合服务</td>
<td class="py-3 px-4 text-gray-300 text-sm">全息成像、幻影成像、空气成像技术</td>
<td class="py-3 px-4 text-gray-300 text-sm">互动触摸、体感技术、虚拟/增强/混合现实</td>
<td class="py-3 px-4 text-gray-300 text-sm">空中成像技术能够在没有物理介质的情况下生成三维立体影像,提供沉浸式体验,技术应用于全息成像、幻影成像等领域。</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-800 hover:bg-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">联创光电</td>
<td class="py-3 px-4 text-gray-300 text-sm">-</td>
<td class="py-3 px-4 text-gray-300 text-sm">180度全息投影技术</td>
<td class="py-3 px-4 text-gray-300 text-sm">三维物体图像生成、虚拟物体漂浮效果</td>
<td class="py-3 px-4 text-gray-300 text-sm">180度全息投影技术通过单面影像汇聚在空中形成三维物体图像提供虚拟物体漂浮在设备中的视觉效果。</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-800 hover:bg-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">中光学</td>
<td class="py-3 px-4 text-gray-300 text-sm">智能光电研发及产业化</td>
<td class="py-3 px-4 text-gray-300 text-sm">空中成像技术研发</td>
<td class="py-3 px-4 text-gray-300 text-sm">视窗全景显示、光场屏、车载HUD、智能终端投影显示</td>
<td class="py-3 px-4 text-gray-300 text-sm">中光学集团正在研发空中成像技术,探索其在视窗全景显示、光场屏等领域的应用,并投资智能光电项目推动光电产业高质量发展。</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-800 hover:bg-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">亿道信息</td>
<td class="py-3 px-4 text-gray-300 text-sm">-</td>
<td class="py-3 px-4 text-gray-300 text-sm">离轴投影光学装置专利</td>
<td class="py-3 px-4 text-gray-300 text-sm">增强现实设备、空间技术应用</td>
<td class="py-3 px-4 text-gray-300 text-sm">子公司亿境虚拟申请了用于增强现实设备的离轴投影光学装置专利,探索空间技术在可穿戴设备中的应用。</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-800 hover:bg-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">福耀玻璃</td>
<td class="py-3 px-4 text-gray-300 text-sm">-</td>
<td class="py-3 px-4 text-gray-300 text-sm">汉恩全息技术</td>
<td class="py-3 px-4 text-gray-300 text-sm">悬浮操控、手势操作、雾幕成像</td>
<td class="py-3 px-4 text-gray-300 text-sm">汉恩全息技术基于微软Kinect技术实现悬浮操控和手势操作并拥有雾幕成像技术。</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-800 hover:bg-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">风语筑</td>
<td class="py-3 px-4 text-gray-300 text-sm">全息空中成像</td>
<td class="py-3 px-4 text-gray-300 text-sm">360度全息空中成像装置专利</td>
<td class="py-3 px-4 text-gray-300 text-sm">空气成像控制屏幕、视觉互动体验</td>
<td class="py-3 px-4 text-gray-300 text-sm">风语筑拥有全息空中成像相关技术和专利储备如可触控的360度全息空中成像装置并应用于深圳市规资局国土空间智慧治理实验室改造项目。</td>
</tr>
<tr class="hover:bg-gray-800 hover:bg-opacity-30">
<td class="py-3 px-4 text-blue-300 font-medium">凯盛科技</td>
<td class="py-3 px-4 text-gray-300 text-sm">空气成像反射膜</td>
<td class="py-3 px-4 text-gray-300 text-sm">空气成像反射膜应用</td>
<td class="py-3 px-4 text-gray-300 text-sm">高反射率膜材料、空中成像技术开发</td>
<td class="py-3 px-4 text-gray-300 text-sm">凯盛科技的空气成像反射膜是空中成像设备的重要组件,已实现稳定销售,并为华为提供材料支持,用于开发基于光学性能的空中成像技术。</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
// 初始化粒子背景
tsParticles.load("particles-js", {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: ["#60a5fa", "#a78bfa", "#f472b6"]
},
shape: {
type: "circle"
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false
}
},
size: {
value: 3,
random: true,
anim: {
enable: false
}
},
line_linked: {
enable: true,
distance: 150,
color: "#4b5563",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 2,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: 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>
```