直接在HTML的</body>标签正上方插入Bubbly脚本并调用bubbly()即可实现动态气泡背景；支持自定义背景色、泡泡色及淡入动画，配置需写在bubbly()参数中且遵循颜色同步设置与fade启用规则。
你想在网页中快速添加动态气泡背景，但面对Bubbly脚本编辑器不知从哪写起、变量怎么填、配置项放哪——其实不用打开VS Code，直接在HTML里写三行就能让页面呼吸起来，连canvas标签都不用手动加。
把Bubbly脚本嵌进网页
打开你的HTML文件，在</body>标签正上方插入这一行：
<script src="https://cdn.jsdelivr.net/npm/bubbly-bg@1.0.0/dist/bubbly-bg.js"></script>
这行必须紧贴</body>，不能塞进<head>里——否则脚本执行时document.body还不存在，控制台会报Cannot read property 'appendChild' of null错误。
启用默认气泡效果
在刚插入的<script>标签下方，立刻写：</script>
bubbly();
它会自动创建全屏<canvas>，用蓝白渐变+半透明泡泡填满整个视口。不需要写DOMContentLoaded监听，bubbly内部已处理DOM就绪时机。
自定义颜色和动画
方法一：改底色和泡泡色
bubbly({ background: "#1a1a2e", bubbles: { fill: "#ff6b6b" } });
【background和bubbles.fill必须同时设置，只改一个会导致泡泡不可见】。颜色值必须是合法CSS字符串，比如"#fff"、"rgb(255,0,0)"或"rebeccapurple"，不能写成函数返回值。
方法二：加淡入动画
bubbly({ fade: true, speed: 0.6 });
【fade必须设为true才能启用淡入】，speed越小淡入越慢，0.6比默认1.0更舒缓；设成3.0会瞬间闪现，失去过渡感。
