欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

動(dòng)態(tài)氣泡背景效果bubbly-bg.js是怎樣實(shí)現(xiàn)的-創(chuàng)新互聯(lián)

本篇文章為大家展示了動(dòng)態(tài)氣泡背景效果bubbly-bg.js是怎樣實(shí)現(xiàn)的，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)長期為上千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為永康企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站，永康網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

bubbly-bg.js是一款漂亮的動(dòng)態(tài)氣泡背景js插件。它是基于HTML5 canvas，壓縮后的版本小于1kb，但是它能制作出各種漂亮的動(dòng)態(tài)氣泡背景效果，非常強(qiáng)大。

使用

可以通過npm來安裝bubbly-bg.js動(dòng)態(tài)氣泡背景插件。

npm install bubbly-bg --save

可以在頁面中引入bubbly-bg.js文件。

<script type="text/javascript" src="path/to/js/bubbly-bg.js"></script>

HTML結(jié)構(gòu)

如果你不指定<canvas>元素作為容器，而是直接在body中初始化插件，那么插件會(huì)在body之后創(chuàng)建一個(gè)<canvas>元素，這個(gè)元素具有position: fixed和z-index: -1屬性，并且它的寬度和高度始終會(huì)等于視口的寬度和高度。例如：

<body>  ...  <script src="js/bubbly-bg.js"></script>  <script>bubbly();</script></body>

你也可以指定一個(gè)<canvas>作為動(dòng)態(tài)氣泡背景的容器。例如：

<canvas id="demo" width="400" height="300"></canvas>

然后通過下面的方法來初始化。

bubbly({  canvas: document.getElementById("demo")});

配置參數(shù)

bubbly-bg.js動(dòng)態(tài)氣泡背景插件的可用配置參數(shù)有：

bubbly({    animate: false, // default is true    blur: 1, // default is 4    bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`, // default is () => `hsla(0, 0%, 100%, ${r() * 0.1})`)    bubbles: 100, // default is Math.floor((canvas.width + canvas.height) * 0.02);    canvas: document.querySelector("#background"), // default is created and attached    colorStart: "#4c004c", // default is blue-ish    colorStop: "#1a001a",// default is blue-ish    compose: "lighter", // default is "lighter"    shadowColor: "#0ff", // default is #fff});

示例，黃色/粉色帶紅色/橙色/黃色氣泡效果：

bubbly({    colorStart: "#fff4e6",    colorStop: "#ffe9e4",    blur: 1,    compose: "source-over",    bubbleFunc: () => `hsla(${Math.random() * 50}, 100%, 50%, .3)`});

上述內(nèi)容就是動(dòng)態(tài)氣泡背景效果bubbly-bg.js是怎樣實(shí)現(xiàn)的，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁標(biāo)題：動(dòng)態(tài)氣泡背景效果bubbly-bg.js是怎樣實(shí)現(xiàn)的-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://www.chinadenli.net/article10/dcdido.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、標(biāo)簽優(yōu)化、定制網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、企業(yè)建站、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)