Bubbly如何制作第一个作品

三步可实现Bubbly动态气泡背景：1.在介绍CDN脚本之前；2.接下来调用bubbly()，启用默认的蓝白效果；3.您可以选择设置对象的自定义颜色（如background、bubbles.fill）或启用淡入淡出动画。

你想用Bubbly生成第一个动态气泡背景，但不知道从哪里开始写代码，在哪加，想改配置——其实三步就可以让页面动起来，不需要了解canvas原理，也不需要部署服务器。 bubbly-bg脚本介绍

打开你的HTML文档，在上面的标签中插入一行CDN链接：

src="dn.jsdelivr.net/npm/bubbly-bg@1.0.0/dist/bubbly-bg.js">

以行必须放在前面，否则脚本找不到document.body会报错；如果放在里，得加defer属性，否则在DOM还没有加载的时候就可以执行。果

在刚刚电影的电影的下行，维跟着写一行调用代码：

bubbly();

这一步操作非常简单，只需将文档拖到屏幕底部即可。它会自动创建一个全屏，用蓝色渐变背景+半电视白泡泡填充整个视图。不需要写document.addEventListener('DOMContentLoaded', ...)，bubbly全部已发微好时机。自定义颜色和动画（可选）

如果不想使用默认的蓝白行颜色，可以传递对象配置。例如改成深灰底+暖黄泡泡：

方法一：内联加行

bubbly({ background: "#222", bubbles: { fill: "#ffcc33" } }); "#222"，否则会报TypeError: background is not a function。

方法二：添加淡入aiボーズ（仅支持v1.0.）

bubbly({ fade: true, speed: 0.8 });

【fade必须设置为true才能启用淡入】，速度控制淡入快慢，0.8比默认1.0略缓慢，比较温和；任成会而过。