分享一个活泼的动态气泡背景效果
这个可以免费使用， 压缩后大概696字节，小脚本绝对不会拖累你的网站速度 ， 你值得拥有！
插件地址：https://github.com/tipsy/bubbly-bg
在五彩缤纷的气泡页面背景中欣赏网站内容绝对近乎冥想的。
闲话不说，直接上代码，使用炒鸡炒鸡煎蛋。please往下看~~~
只要引入下面两行代码就会生成上面这个效果了
<script src="https://cdn.jsdelivr.net/npm/bubbly-bg@0.2.3/dist/bubbly-bg.js"></script> <script>bubbly();</script>ps: bubbly() 是调用的其中一个方法，下面再介绍几个动画方法
- 蓝色与白色气泡
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)` });
- 自定义设置参数
bubbly({
animate: true, // 动画 默认是正确的
blur: 4, // 默认的是4
bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`, // 气泡函数
bubbles:100 , // 气泡数量
canvas: document.querySelector("#background"), // 默认是 created and attached
colorStart: "#337ab7", //默认是 blue-ish 背景色左上角
colorStop: "#ff404b",//默认是 blue-ish 背景色右下角
compose: "lighter", //默认是 "lighter"
shadowColor: "#0ff", //默认是 #fff
});本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-03-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
