活潑的動態氣泡背景效果

好看的氣泡背景圖

這個能夠無償使用， 壓縮後大概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