直接在HTML的
Bubbly脚本编辑器怎么用
时间:2026-06-16
时间:2026-06-16
直接在HTML的
标签正上方插入Bubbly脚本并调用bubbly(),就能让页面拥有动态气泡背景。背景色、泡泡颜色、淡入动画全都支持自定义,配置写在bubbly()参数里即可——但有个小陷阱:颜色必须成对设置,淡入必须显式开启。

想在网页里快速加上动态气泡背景,但对着Bubbly脚本编辑器不知道从哪下手?变量怎么填、配置项放哪?其实根本用不着打开VS Code,直接在HTML里写三行代码,页面就能“呼吸”起来——连标签都不用手动加。
打开你的HTML文件,在标签正上方插入这行:
注意,这行必须紧贴,千万别塞进里——否则脚本执行时document.body还不存在,控制台会报Cannot read property 'appendChild' of null这样的错误。
在刚插入的标签下方,直接写:
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,泡泡会瞬间闪现,过渡感就没了。