必须先确保bubbly脚本正确加载并触发canvas挂载，否则所有配置无效；推荐cdn方式引入脚本并置于body底部，再调用bubbly()启动基础效果，最后通过配置对象自定义背景与气泡颜色。
要在网页中添加Bubbly粒子特效，必须先确保脚本正确加载并触发canvas挂载，否则后续所有配置都无效。
引入Bubbly脚本
方法一：CDN方式（推荐快速测试）
在HTML文件的 标签最底部，紧贴闭合标签前插入：<script src="https://cdn.jsdelivr.net/npm/bubbly-bg@1.0.0/dist/bubbly-bg.js"></script>
方法二：npm工程导入
终端执行 npm install bubbly-bg → 在入口JS文件（如 main.js）顶部写 import 'bubbly-bg';。【关键前提】 必须用 import，不能用 require()；ESM导入才会自动注册全局函数。
⚠️ 注意：脚本必须放在 内，且不能塞进 里——哪怕加了 defer 也不行。DOM未就绪时调用 bubbly()，canvas根本插不进去。
启动基础气泡效果
在CDN脚本或 import 语句之后、 之前，添加一行：<script>bubbly();</script>
刷新页面。如果看到全屏淡蓝色气泡缓慢浮升，说明已成功；若白屏或控制台报错 Failed to load resource，大概率是CDN链接拼写错误或被本地网络拦截。
这一步不能跳过。很多用户直接改颜色参数，结果连canvas都没生成，所有自定义全是空转。
自定义粒子样式
步骤一：替换默认调用为对象参数形式
把原来简单的 bubbly(); 替换成完整配置对象：
步骤二：确保 background 和 bubbles.fill 同时设置
二者缺一不可——只设 background 会黑屏，只设 fill 气泡会消失。
步骤三：复制以下代码粘贴到 <script></script> 标签内：
bubbly({<br> background: (ctx) => {<br> const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, ctx.canvas.height);<br> gradient.addColorStop(0, "#0f2027");<br> gradient.addColorStop(1, "#203a43");<br> return gradient;<br> },<br> bubbles: {<br> fill: () => `hsla(${Math.random() * 60 + 30}, 100%, 70%, ${Math.random() * 0.3})`<br> }<br>});
⚠️ 注意：fill 函数里必须返回带 alpha 通道的颜色值（如 hsla 或 rgba），写成 #ff9900 会导致气泡堆叠发糊。
