共计 1128 个字符,预计需要花费 3 分钟才能阅读完成。
难看的气泡背景图
这个能够收费应用,压缩后大略 696 字节,小脚本相对不会连累你的网站速度,你值得领有!
插件地址:bubbly-bg
预览地址:https://tipsy.github.io/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
});
还能够应用这个 particles.js 这个库
demo
正文完
发表至: javascript
2021-03-18