bubbly-bg.js是一款漂亮的动态气泡背景js插件。它是基于HTML5 canvas，压缩后的版本小于1kb，但是它能制作出各种漂亮的动态气泡背景效果，非常强大。
github地址：https://github.com/tipsy/bubbly-bg
HTML结构
<body>
...
<script src="js/bubbly-bg.js"></script>
<script>bubbly();</script>
</body>在线demo：https://tipsy.github.io/bubbly-bg
bubbly-bg.js动态气泡背景插件的可用配置参数有：
bubbly({
// default is true
animate: false,
// default is 4
blur: 1,
// default is () => `hsla(0, 0%, 100%, ${r() * 0.1})`)
bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`,
// default is Math.floor((canvas.width + canvas.height) * 0.02);
bubbles: 100,
// default is created and attached
canvas: document.querySelector("#background"),
// default is blue-ish
colorStart: "#4c004c",
// default is blue-ish
colorStop: "#1a001a",
// default is "lighter"
compose: "lighter",
// default is #fff
shadowColor: "#0ff",
// default is this
angleFunc: () => Math.random() * Math.PI * 2,
// default is this
velocityFunc: () => 0.1 + Math.random() * 0.5,
// default is 4 + Math.random() * width / 25
radiusFunc: () => 4 + Math.random() * 25
});默认蓝色
bubbly();黑红
bubbly({
colorStart: "#111",
colorStop: "#422",
bubbleFunc: () => `hsla(0, 100%, 50%, ${Math.random() * 0.25})`
});紫色
bubbly({
colorStart: "#4c004c",
colorStop: "#1a001a",
bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`
});黄色/粉色，带红色/橙色/黄色气泡
bubbly({
colorStart: "#fff4e6",
colorStop: "#ffe9e4",
blur: 1,
compose: "source-over",
bubbleFunc: () => `hsla(${Math.random() * 50}, 100%, 50%, .3)`
});非特殊说明，本博所有文章均为博主原创。
如若转载，请注明出处：https://www.ihulang.com/index/info/14.html