385 lines
24 KiB
HTML
385 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-theme="night">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>川超联赛 - AI深度投研报告</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.1/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||
body {
|
||
font-family: 'Inter', 'Microsoft YaHei', sans-serif;
|
||
background-color: #020011;
|
||
overflow: hidden;
|
||
}
|
||
.glass-card {
|
||
background: rgba(10, 10, 30, 0.4);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
||
transition: all 0.3s ease-in-out;
|
||
}
|
||
.glass-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(100, 200, 255, 0.3);
|
||
}
|
||
.fui-title {
|
||
text-shadow: 0 0 8px rgba(102, 178, 255, 0.7);
|
||
}
|
||
.bento-grid {
|
||
display: grid;
|
||
gap: 1rem;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
grid-auto-rows: minmax(100px, auto);
|
||
}
|
||
.bento-item-1 { grid-column: span 12; grid-row: span 2; }
|
||
.bento-item-2 { grid-column: span 12; md:grid-column: span 8; grid-row: span 3; }
|
||
.bento-item-3 { grid-column: span 12; md:grid-column: span 4; grid-row: span 3; }
|
||
.bento-item-4 { grid-column: span 12; md:grid-column: span 5; grid-row: span 3; }
|
||
.bento-item-5 { grid-column: span 12; md:grid-column: span 7; grid-row: span 3; }
|
||
.bento-item-6 { grid-column: span 12; md:grid-column: span 6; grid-row: span 3; }
|
||
.bento-item-7 { grid-column: span 12; md:grid-column: span 6; grid-row: span 3; }
|
||
@media (min-width: 768px) {
|
||
.bento-item-1 { grid-column: span 8; grid-row: span 2; }
|
||
.bento-item-2 { grid-column: span 4; grid-row: span 2; }
|
||
.bento-item-3 { grid-column: span 6; grid-row: span 3; }
|
||
.bento-item-4 { grid-column: span 6; grid-row: span 3; }
|
||
.bento-item-5 { grid-column: span 12; grid-row: span 3; }
|
||
.bento-item-6 { grid-column: span 7; grid-row: span 4; }
|
||
.bento-item-7 { grid-column: span 5; grid-row: span 4; }
|
||
}
|
||
#bg-canvas {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: -1;
|
||
}
|
||
.turrell-glow-top {
|
||
position: fixed;
|
||
top: -30%;
|
||
left: -30%;
|
||
width: 80vw;
|
||
height: 80vh;
|
||
background: radial-gradient(circle, rgba(66, 153, 225, 0.15) 0%, rgba(66, 153, 225, 0) 60%);
|
||
animation: pulse 15s infinite alternate;
|
||
}
|
||
.turrell-glow-bottom {
|
||
position: fixed;
|
||
bottom: -40%;
|
||
right: -40%;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: radial-gradient(circle, rgba(129, 90, 213, 0.1) 0%, rgba(129, 90, 213, 0) 60%);
|
||
animation: pulse 20s infinite alternate-reverse;
|
||
}
|
||
@keyframes pulse {
|
||
0% { transform: scale(0.8); opacity: 0.7; }
|
||
100% { transform: scale(1.2); opacity: 1; }
|
||
}
|
||
.section-header {
|
||
border-left: 3px solid #4ade80;
|
||
padding-left: 1rem;
|
||
}
|
||
.table th, .table td {
|
||
background-color: transparent !important;
|
||
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
|
||
}
|
||
.table th {
|
||
color: #a5b4fc;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="text-gray-200 bg-[#020011] antialiased">
|
||
<canvas id="bg-canvas"></canvas>
|
||
<div class="turrell-glow-top"></div>
|
||
<div class="turrell-glow-bottom"></div>
|
||
|
||
<div class="container mx-auto p-4 md:p-8 relative z-10">
|
||
<header class="text-center mb-12">
|
||
<h1 class="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-indigo-500 mb-2 fui-title">川超联赛</h1>
|
||
<h2 class="text-2xl md:text-3xl font-light text-gray-300">AI深度投研报告</h2>
|
||
<p class="mt-4 text-xs text-gray-500 tracking-widest">北京价值前沿科技有限公司 AI投研agent：“价小前投研” | 本报告为AI合成数据，投资需谨慎。</p>
|
||
</header>
|
||
|
||
<main class="bento-grid">
|
||
<!-- Core Viewpoint -->
|
||
<div class="bento-item-1 glass-card rounded-3xl p-6 flex flex-col justify-center">
|
||
<h3 class="section-header text-2xl font-semibold text-gray-100 mb-4">核心观点摘要</h3>
|
||
<p class="text-gray-300 text-lg leading-relaxed">
|
||
“川超联赛”是一个处于<strong class="text-cyan-400">早期主题驱动阶段</strong>的区域性体育IP概念。其核心驱动力源于政策支持下的<strong class="text-green-400">“体育+文旅+消费”新商业模式复制</strong>，未来潜力巨大。然而，当前概念热度远超基本面验证，存在显著的预期差。短期价值实现高度依赖于赛事的成功举办和商业化运作的实际落地情况。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Timeline -->
|
||
<div class="bento-item-2 glass-card rounded-3xl p-6">
|
||
<h3 class="section-header text-2xl font-semibold text-gray-100 mb-4">概念演进与时间轴</h3>
|
||
<div id="timeline-chart" class="w-full h-full min-h-[250px]"></div>
|
||
</div>
|
||
|
||
<!-- Core Logic -->
|
||
<div class="bento-item-3 glass-card rounded-3xl p-6 overflow-y-auto">
|
||
<h3 class="section-header text-2xl font-semibold text-gray-100 mb-4">核心逻辑：区域经济新引擎</h3>
|
||
<ul class="space-y-4 text-gray-300">
|
||
<li><strong class="text-indigo-400">政策驱动与政府背书:</strong> 省体育局官方支持，定位为省级战略，确保合规性并撬动公共资源。</li>
|
||
<li><strong class="text-indigo-400">“苏超”模式成功验证:</strong> “苏超”已验证其“低投入、高回报”模式：场均观众超2.8万人，赞助商从6家增至20家，带动区域体育旅游消费增长13%。这是市场对“川超”抱有高期望的根本逻辑。</li>
|
||
<li><strong class="text-indigo-400">四川强大文旅与消费基础:</strong> 四川白酒产业2022年营收高达3447.2亿元。以五粮液、泸州老窖为代表的龙头企业为赛事商业化提供坚实的本土经济基础，市场预期强大的川企将成为赛事重要“金主”。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Catalysts & Path -->
|
||
<div class="bento-item-4 glass-card rounded-3xl p-6 overflow-y-auto">
|
||
<h3 class="section-header text-2xl font-semibold text-gray-100 mb-4">关键催化剂与发展路径</h3>
|
||
<div class="space-y-6">
|
||
<div>
|
||
<h4 class="font-bold text-lg text-cyan-300 mb-2">近期催化剂 (未来3-6个月)</h4>
|
||
<ul class="list-disc list-inside text-gray-300 space-y-1">
|
||
<li><strong class="text-yellow-400">赛事开幕 (2025-09-20):</strong> 概念走向现实的首个关键验证点。</li>
|
||
<li><strong class="text-yellow-400">首批顶级赞助商官宣:</strong> 本地龙头企业赞助是商业价值的“试金石”。</li>
|
||
<li><strong class="text-yellow-400">主流媒体转播合作落地:</strong> 影响力能否“出圈”的关键。</li>
|
||
<li><strong class="text-yellow-400">首月运营数据公布:</strong> 场均观众、线上热度等初步数据。</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-lg text-purple-300 mb-2">长期发展路径</h4>
|
||
<ol class="list-decimal list-inside text-gray-300 space-y-1">
|
||
<li><strong>IP构建与模式验证期 (2025-26):</strong> 跑通“体育+文旅+消费”商业模式。</li>
|
||
<li><strong>商业化深化期 (2027-28):</strong> 提升赞助金额，开发IP衍生品，探索多元变现。</li>
|
||
<li><strong>生态化发展期 (2029+):</strong> 打造城市名片，与重大文旅活动深度捆绑，形成产业生态。</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Information Asymmetry -->
|
||
<div class="bento-item-5 glass-card rounded-3xl p-6">
|
||
<h3 class="section-header text-2xl font-semibold text-gray-100 mb-4">预期差：市场热度 vs 机构沉默</h3>
|
||
<p class="text-gray-400 mb-4">当前关于“川超”的信息主要来自新闻层面，市场情绪乐观且弥漫。然而，机构研报与上市公司路演数据中，绝大多数均未提及“川超联赛”，形成强烈反差，表明概念尚未进入机构核心视野，存在显著的“信息茧房”效应。</p>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div class="border border-green-500/30 bg-green-900/20 p-4 rounded-xl">
|
||
<h4 class="font-bold text-green-300 text-lg mb-2">市场认知 (News)</h4>
|
||
<p class="text-sm">【财联社】将“川超”与“2025年中国足球产业规模超2万亿元”宏观背景挂钩，暗示巨大商业机会。</p>
|
||
<p class="text-sm mt-2">网友热情高涨，成都队招募令吸引超300人报名。</p>
|
||
</div>
|
||
<div class="border border-amber-500/30 bg-amber-900/20 p-4 rounded-xl">
|
||
<h4 class="font-bold text-amber-300 text-lg mb-2">机构关注度 (Reports/Roadshows)</h4>
|
||
<p class="text-sm italic">"在您提供的所有路演材料中，<strong class='text-amber-200'>没有直接提及“川超联赛”</strong>。"</p>
|
||
<p class="text-sm italic mt-2">"绝大多数报告明确指出<strong class='text-amber-200'>未发现</strong>任何与“川超联赛”相关的信息。" (共五份报告如此声明)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Industry Chain -->
|
||
<div class="bento-item-6 glass-card rounded-3xl p-6 overflow-y-auto">
|
||
<h3 class="section-header text-2xl font-semibold text-gray-100 mb-4">产业链与核心公司剖析</h3>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<h4 class="text-lg font-semibold text-cyan-200">上游：赛事基础资源</h4>
|
||
<p class="text-sm text-gray-400">体育器材与设施 (共创草坪, 英派斯), 场馆显示屏 (雷曼光电), 运动康复 (倍益康)。</p>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-lg font-semibold text-cyan-300">中游：赛事组织与传播</h4>
|
||
<p class="text-sm text-gray-400">赛事/场馆运营 (<strong class="text-white">天府文旅</strong>), 媒体传播与营销 (<strong class="text-white">川网传媒, 博瑞传播, 思美传媒</strong>), 电视信号分发 (流金科技)。</p>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-lg font-semibold text-cyan-400">下游：商业化变现与产业联动</h4>
|
||
<p class="text-sm text-gray-400">文旅消费 (峨眉山A), 本地零售 (红旗连锁, 茂业商业), 潜在赞助商 (白酒企业, 济川药业等)。</p>
|
||
</div>
|
||
</div>
|
||
<div class="divider text-gray-500 my-6">核心玩家对比</div>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<h4 class="text-lg font-semibold text-green-300">领导者 & 逻辑最纯粹者</h4>
|
||
<p class="text-sm"><strong class="text-white">天府文旅 (000558):</strong> 成都体育产业投资集团旗下，主营体育场馆运营，逻辑最直接的核心载体。</p>
|
||
<p class="text-sm mt-1"><strong class="text-white">川网传媒 (300987) / 博瑞传播 (600880):</strong> 本地国资传媒，赛事宣传报道、媒体版权运营的天然合作方。</p>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-lg font-semibold text-yellow-300">追赶者 & 潜力玩家</h4>
|
||
<p class="text-sm"><strong class="text-white">思美传媒 (002712):</strong> 具备全国性数字媒体合作关系，是“川超”实现全国“破圈”的关键变量。</p>
|
||
<p class="text-sm mt-1"><strong class="text-white">峨眉山A:</strong> 四川顶级文旅IP，若实现“看球+旅游”深度联动，将极大打开想象空间。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Risks -->
|
||
<div class="bento-item-7 glass-card rounded-3xl p-6 overflow-y-auto border-red-500/20">
|
||
<h3 class="section-header border-red-400 text-2xl font-semibold text-gray-100 mb-4">潜在风险与挑战</h3>
|
||
<ul class="space-y-4 text-gray-300">
|
||
<li>
|
||
<strong class="text-red-400">商业化风险:</strong> 能否成功复制“苏超”模式是最大不确定性。四川与江苏的经济结构、消费习惯、赞助文化存在差异，民间热情能否有效转化为商业收入尚待观察。
|
||
</li>
|
||
<li>
|
||
<strong class="text-red-400">执行与运营风险:</strong> 赛事扩展到跨10个月、162场比赛的庞大规模，对组织、协调、安保、后勤提出了极高要求，执行复杂度与不确定性剧增。
|
||
</li>
|
||
<li>
|
||
<strong class="text-red-400">政策风险:</strong> 地方体育赛事的长期发展依赖于持续的政策扶持。若未来政策重心转移，可能影响赛事发展。
|
||
</li>
|
||
<li class="bg-red-900/30 p-3 rounded-lg">
|
||
<strong class="text-red-300">信息交叉验证风险 (当前最突出):</strong> 新闻热度与机构研报的“集体沉默”构成强烈反差。这种信息断层表明，市场可能存在过度解读，投资者需警惕基于单方面信息炒作的风险。
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Associated Stocks Table -->
|
||
<section class="mt-8 md:mt-16">
|
||
<h3 class="text-3xl md:text-4xl font-bold text-center mb-8 fui-title">概念关联标的</h3>
|
||
<div class="glass-card rounded-3xl p-4 md:p-6 overflow-x-auto">
|
||
<table class="table table-zebra w-full">
|
||
<thead>
|
||
<tr>
|
||
<th class="w-1/6">股票名称</th>
|
||
<th class="w-1/6">关联原因</th>
|
||
<th class="w-1/6">标签</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>川网传媒 (<a href="https://valuefrontier.cn/company?scode=300987" target="_blank" class="link link-hover text-cyan-400">300987</a>)</td><td>实控人四川省委宣传部，主营新媒体服务，网站传播力四川第一</td><td>四川传媒</td></tr>
|
||
<tr><td>博瑞传播 (<a href="https://valuefrontier.cn/company?scode=600880" target="_blank" class="link link-hover text-cyan-400">600880</a>)</td><td>实控人成都国资委，现代媒体业务包括赛事整合营销</td><td>四川传媒</td></tr>
|
||
<tr><td>思美传媒 (<a href="https://valuefrontier.cn/company?scode=002712" target="_blank" class="link link-hover text-cyan-400">002712</a>)</td><td>实控人四川国资委，拥有矩阵化媒体资源，与头部数字媒体深度合作</td><td>四川传媒</td></tr>
|
||
<tr><td>天府文旅 (<a href="https://valuefrontier.cn/company?scode=000558" target="_blank" class="link link-hover text-cyan-400">000558</a>)</td><td>控股股东成都体育产业投资集团，体育业务为综合体育场馆运营、体育赛事</td><td>四川文体旅游</td></tr>
|
||
<tr><td>峨眉山A</td><td>参股公司涉体育赛事组织；与成都蓉城俱乐部有战略合作</td><td>四川文体旅游</td></tr>
|
||
<tr><td>红旗连锁 (<a href="https://valuefrontier.cn/company?scode=002697" target="_blank" class="link link-hover text-cyan-400">002697</a>)</td><td>实控人四川国资委，主营便利超市连锁，深耕成都市场</td><td>四川零售</td></tr>
|
||
<tr><td>茂业商业 (<a href="https://valuefrontier.cn/company?scode=600828" target="_blank" class="link link-hover text-cyan-400">600828</a>)</td><td>公司位于成都，拥有成都核心商圈零售门店</td><td>四川零售</td></tr>
|
||
<tr><td>流金科技 (<a href="https://valuefrontier.cn/company?scode=920021" target="_blank" class="link link-hover text-cyan-400">920021</a>)</td><td>为四川卫视等提供播出渠道分发服务，有欧洲杯转播监播服务经验</td><td>北交所</td></tr>
|
||
<tr><td>倍益康 (<a href="https://valuefrontier.cn/company?scode=920199" target="_blank" class="link link-hover text-cyan-400">920199</a>)</td><td>公司地处成都，为运动员提供专业康复服务保障</td><td>北交所</td></tr>
|
||
<tr><td>绿茵生态 (<a href="https://valuefrontier.cn/company?scode=002887" target="_blank" class="link link-hover text-cyan-400">002887</a>)</td><td>足球器材及场地建设</td><td>足球器材</td></tr>
|
||
<tr><td>共创草坪 (<a href="https://valuefrontier.cn/company?scode=605099" target="_blank" class="link link-hover text-cyan-400">605099</a>)</td><td>人造草坪，用于足球场地</td><td>足球器材</td></tr>
|
||
<tr><td>英派斯 (<a href="https://valuefrontier.cn/company?scode=002899" target="_blank" class="link link-hover text-cyan-400">002899</a>)</td><td>体育器材供应商</td><td>足球器材</td></tr>
|
||
<tr><td>雷曼光电 (<a href="https://valuefrontier.cn/company?scode=300162" target="_blank" class="link link-hover text-cyan-400">300162</a>)</td><td>LED显示屏，用于体育场馆</td><td>足球器材</td></tr>
|
||
<tr><td>双象股份 (<a href="https://valuefrontier.cn/company?scode=002395" target="_blank" class="link link-hover text-cyan-400">002395</a>)</td><td>人造革，可用于足球制造</td><td>足球器材</td></tr>
|
||
<tr><td>安利股份 (<a href="https://valuefrontier.cn/company?scode=300218" target="_blank" class="link link-hover text-cyan-400">300218</a>)</td><td>生态功能性合成革，可用于足球制造</td><td>足球器材</td></tr>
|
||
<tr><td>致欧科技 (<a href="https://valuefrontier.cn/company?scode=301376" target="_blank" class="link link-hover text-cyan-400">301376</a>)</td><td>户外体育休闲用品</td><td>足球器材</td></tr>
|
||
<tr><td>三柏硕 (<a href="https://valuefrontier.cn/company?scode=001300" target="_blank" class="link link-hover text-cyan-400">001300</a>)</td><td>休闲运动和健身器材</td><td>足球器材</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
// ECharts Timeline Initialization
|
||
var chartDom = document.getElementById('timeline-chart');
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (params) {
|
||
return params[0].name + '<br/>' + params[0].marker + params[0].value[2];
|
||
},
|
||
backgroundColor: 'rgba(20, 20, 40, 0.8)',
|
||
borderColor: 'rgba(100, 200, 255, 0.3)',
|
||
textStyle: { color: '#E5E7EB' }
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'time',
|
||
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } },
|
||
axisLabel: { color: '#9CA3AF' }
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: { show: false },
|
||
axisLabel: { show: false },
|
||
splitLine: { show: false }
|
||
},
|
||
series: [{
|
||
name: '事件点',
|
||
type: 'line',
|
||
symbol: 'circle',
|
||
symbolSize: 15,
|
||
lineStyle: { color: 'rgba(79, 70, 229, 0.5)', width: 3, type: 'dashed' },
|
||
itemStyle: {
|
||
color: '#6366F1',
|
||
borderColor: '#A5B4FC',
|
||
borderWidth: 2,
|
||
shadowColor: 'rgba(99, 102, 241, 0.5)',
|
||
shadowBlur: 10
|
||
},
|
||
data: [
|
||
{ value: [new Date('2025-06-01'), 1, '催化背景: "苏超"火爆，网友问政呼吁'], name: '2025-06-01' },
|
||
{ value: [new Date('2025-06-12'), 2, '市场发酵: 财联社报道，与万亿足球产业挂钩'], name: '2025-06-12' },
|
||
{ value: [new Date('2025-07-15'), 1, '计划调整: 首次宣布延期，为提升赛事品质'], name: '2025-07-15' },
|
||
{ value: [new Date('2025-08-10'), 2, '方案升级: 官宣跨年新赛制 (28轮162场)'], name: '2025-08-10' },
|
||
{ value: [new Date('2025-08-15'), 1, '落地执行: 成都队发布招募令，超300人报名'], name: '2025-08-15' },
|
||
{ value: [new Date('2025-09-20'), 3, '赛事开幕: 预期中的首个关键验证节点'], name: '2025-09-20' }
|
||
],
|
||
emphasis: {
|
||
itemStyle: {
|
||
borderColor: '#FFFFFF',
|
||
borderWidth: 3,
|
||
scale: 1.2
|
||
}
|
||
}
|
||
}]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
window.addEventListener('resize', myChart.resize);
|
||
|
||
// Background Particles Animation
|
||
const canvas = document.getElementById('bg-canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
let particles = [];
|
||
const numParticles = 100;
|
||
|
||
function setCanvasSize() {
|
||
canvas.width = window.innerWidth;
|
||
canvas.height = window.innerHeight;
|
||
}
|
||
|
||
function createParticles() {
|
||
particles = [];
|
||
for (let i = 0; i < numParticles; i++) {
|
||
particles.push({
|
||
x: Math.random() * canvas.width,
|
||
y: Math.random() * canvas.height,
|
||
vx: (Math.random() - 0.5) * 0.2,
|
||
vy: (Math.random() - 0.5) * 0.2,
|
||
radius: Math.random() * 1.5,
|
||
});
|
||
}
|
||
}
|
||
|
||
function animate() {
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
particles.forEach(p => {
|
||
p.x += p.vx;
|
||
p.y += p.vy;
|
||
|
||
if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
|
||
if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
|
||
|
||
ctx.beginPath();
|
||
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
|
||
ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
|
||
ctx.fill();
|
||
});
|
||
requestAnimationFrame(animate);
|
||
}
|
||
|
||
window.addEventListener('resize', () => {
|
||
setCanvasSize();
|
||
createParticles();
|
||
});
|
||
|
||
setCanvasSize();
|
||
createParticles();
|
||
animate();
|
||
</script>
|
||
</body>
|
||
</html> |