html5背景泡泡,HTML5 canvas梦幻圆形泡泡动画背景特效
background.js是一款HTML5 canvas夢幻圓形泡泡動畫背景特效。通過background.js插件，你可以輕松的制作出帶漸變效果的氣泡動畫背景效果，并且背景顏色能在4種顏色間平滑過渡轉換。
background.js插件的特點還有：
支持4種漸變顏色。
實現夢幻泡泡效果。
動畫平滑過渡效果。
檢測移動設備并嘗試優化資源。
純JavaScript制作，沒有任何依賴。
使用方法
在頁面中引入background.js文件。
HTML結構
使用元素來創建背景。
CSS樣式
如果要制作全屏效果，可以使用下面的css代碼將元素固定在視口中。
#background {
position: fixed;
top: 0;
left: 0;
z-index: -100;
}
配置參數
background.js創建可以修改的配置參數如下：
var options =
{
resolution: 1,
gradient:
{
resolution: 4,
smallRadius: 0,
hue:
{
min: 0,
max: 360
},
saturation:
{
min: 40,
max: 80
},
lightness:
{
min: 25,
max: 35
}
},
bokeh:
{
count: 30,
size:
{
min: 0.1,
max: 0.3
},
alpha:
{
min: 0.05,
max: 0.4
},
jitter:
{
x: 0.3,
y: 0.3
}
},
speed:
{
min: 0.0001,
max: 0.001
},
debug:
{
strokeBokeh: false,
showFps: false
}
};
background.js-HTML5 canvas夢幻圓形泡泡動畫背景特效的github地址為：https://github.com/pbondoer/bubble-bg
總結
以上是生活随笔為你收集整理的html5背景泡泡,HTML5 canvas梦幻圆形泡泡动画背景特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 对于路由地址并未切换，但是地址栏发生地址
- 下一篇： java实现简单泡泡屏保动画及点击变实心