🍅 作者主頁：Java李楊勇?

🍅 簡(jiǎn)介：Java領(lǐng)域優(yōu)質(zhì)創(chuàng)作者🏆、Java李楊勇公號(hào)作者? ?簡(jiǎn)歷模板、學(xué)習(xí)資料、面試題庫、技術(shù)互助【關(guān)注我，都給你】

🍅 歡迎點(diǎn)贊 👍 收藏 ?留言 📝 ??

效果演示：?文末獲取源碼?

代碼目錄：

主要代碼實(shí)現(xiàn)：

CSS樣式：

.codrops-demos {font-size: 0.8em;text-align: center;position: absolute;z-index: 99;width: 96%;}.codrops-demos a {display: inline-block;margin: 0.35em 0.1em;padding: 0.5em 1.2em;outline: none;text-decoration: none;text-transform: uppercase;letter-spacing: 1px;font-weight: 700;border-radius: 2px;font-size: 110%;border: 2px solid transparent;color: #fff;}.codrops-demos a:hover,.codrops-demos a.current-demo {border-color: #383a3c;}

HTML代碼 :

<nav class="codrops-demos"><a class="current-demo" href="index.html">Demo 1</a><a href="index2.html">Demo 2</a><a href="index3.html">Demo 3</a><a href="index4.html">Demo 4</a><a href="index5.html">Demo 5</a><a href="index6.html">Demo 6</a><a href="index7.html">Demo 7</a></nav><canvas id="c"></canvas><script type="text/javascript">var w = c.width = window.innerWidth,h = c.height = window.innerHeight,ctx = c.getContext('2d'),opts = {len: 20,count: 50,baseTime: 10,addedTime: 10,dieChance: .05,spawnChance: 1,sparkChance: .1,sparkDist: 10,sparkSize: 2,color: 'hsl(hue,100%,light%)',baseLight: 50,addedLight: 10,shadowToTimePropMult: 6,baseLightInputMultiplier: .01,addedLightInputMultiplier: .02,cx: w / 2,cy: h / 2,repaintAlpha: .04,hueChange: .1},tick = 0,lines = [],dieX = w / 2 / opts.len,dieY = h / 2 / opts.len,baseRad = Math.PI * 2 / 6;ctx.fillStyle = 'black';ctx.fillRect(0, 0, w, h);function loop() {window.requestAnimationFrame(loop);++tick;ctx.globalCompositeOperation = 'source-over';ctx.shadowBlur = 0;ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha);ctx.fillRect(0, 0, w, h);ctx.globalCompositeOperation = 'lighter';if (lines.length < opts.count && Math.random() < opts.spawnChance) lines.push(new Line);lines.map(function(line) {line.step()})}function Line() {this.reset()}Line.prototype.reset = function() {this.x = 0;this.y = 0;this.addedX = 0;this.addedY = 0;this.rad = 0;this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();this.color = opts.color.replace('hue', tick * opts.hueChange);this.cumulativeTime = 0;this.beginPhase()}Line.prototype.beginPhase = function() {this.x += this.addedX;this.y += this.addedY;this.time = 0;this.targetTime = (opts.baseTime + opts.addedTime * Math.random()) | 0;this.rad += baseRad * (Math.random() < .5 ? 1 : -1);this.addedX = Math.cos(this.rad);this.addedY = Math.sin(this.rad);if (Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY) this.reset()}

源碼獲取

大家可以點(diǎn)贊、收藏、關(guān)注、評(píng)論我啦 、查看博主主頁或下方微信公眾號(hào)獲取~！

打卡 文章 更新?44??/? 100天

精彩推薦更新中：

HTML5大作業(yè)實(shí)戰(zhàn)案例《100套》

Java畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例《100套》

總結(jié)

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️酷炫的canvas全屏背景动画特效❤️的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。