Bubbly脚本编辑器新手入门教程：快速掌握

在HTML的标签前插入Bubbly脚本并执行bubbly()，即可为页面添加动态气泡背景。背景色、泡泡颜色、淡入动画均支持自定义，配置直接写在bubbly()参数中。但需注意：背景与泡泡颜色必须成对设置，淡入效果需显式开启。

想快速为网页加入动态气泡背景，却对Bubbly脚本配置无从下手？变量如何赋值、配置项放在哪里？实际上无需打开VS Code，在HTML中编写三行代码即可让页面“呼吸”起来——连标签都无需手动添加。

将Bubbly脚本嵌入网页

打开你的HTML文件，在标签正上方插入这行代码：

<script src="https://cdn.jsdelivr.net/npm/bubbly-bg@1.0.0/dist/bubbly-bg.js"></script>

此脚本必须紧贴，切勿放入中——否则脚本执行时document.body尚未加载，控制台会抛出Cannot read property 'appendChild' of null错误。

启用默认气泡效果

在刚插入的<script>标签下方，直接调用：

bubbly();

该函数会自动创建一个全屏，以蓝白渐变搭配半透明泡泡填满整个视口。无需担心DOM加载时机，bubbly内部已处理完毕，连DOMContentLoaded监听都不需编写。

自定义颜色和动画

方法一：调整背景色与泡泡颜色

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，泡泡会瞬间闪烁，过渡感消失。