又到了一年一度的春节时期啦！昨天呢是北方的小年，今天是南方的小年，看到大家可以愉快的放烟花，过大年很是羡慕呀！辞旧岁，贺新春，今年我呀要放烟花，过春节！。
这个特效简单的使用了前端三件套即可完成，html，js，css，canvas整体效果如下GIF图所示（码内隐藏特殊变量，找到有惊喜！）
背景音乐是《China-E》个人感觉很有新年的感觉，整个China系列的歌曲都很nice，该特效的寓意就是开门大吉，辞旧迎新，2023年的大门向你敞开，新的一年想你招手，小兔子抱着锦鲤，也预示着吉祥，山鱼在这里祝大家前兔无量，大展宏兔！
就是开心，就是玩，就是兔个吉利！，话不多说上代码！
比较多的css代码，所以单独放在了一个文件下，如果用的时候出现图片丢失的问题，可以看看路径写对了没
/* 如果单独放记得去掉style标签哦 */* {margin: 0;padding: 0;}body {overflow: hidden;margin: 0;cursor: pointer;font-size: 30px;background: url("../img/辞旧岁贺新春兔年.png");background-size: 100% 100%;}#unmuteButton {position: absolute;z-index: -1;top: 0;left: 0;font-size: 10px;font-family: "STHupo";width: 80px;height: 30px;border: 1px solid red;background-color: rgb(255, 115, 0);border-radius: 10%;}#unmuteButton2 {position: absolute;z-index: -1;top: 0px;left: 120px;font-size: 10px;font-family: "STHupo";width: 80px;height: 30px;border: 1px solid red;background-color: rgb(255, 115, 0);border-radius: 10%;}#video {position: absolute;top: -100000;left: -100000;}#box {position: absolute;z-index: 1;width: 100%;height: 100%;top: 0;left: 0;}#box::before,#box::after {content: '';z-index: 99;margin-top: -37px;float: left;width: 50%;height: 1000px;background: url("../img/兔子2023.png") no-repeat;transition: .4s;}#box::before {float: left;background-position: -220px 37px;}#box::after {float: right;background-position: -210px;}#box:hover::before {transform: translateX(-100%)}#box:hover::after {transform: translateX(100%)}/* 去除滚动条 */body::-webkit-scrollbar {width: 0 !important}比比比比较多的js代码，注意同上
// 烟花生成window.requestAnimationFrame = (function () {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function (callback) {window.setTimeout(callback, 1000)}})();// 获取画布var area = document.getElementById("mycanvas");area.width = document.documentElement.clientWidth;area.height = document.documentElement.clientHeight;var ctx = area.getContext("2d");hue = 120;timerTick = 0;timerTotal = 5;fireworks = [];particles = [];function random(min, max) {return Math.random() * (max - min) + min;}function distans(sx, sy, tx, ty) {var xdistan = sx - tx;var ydistan = sy - ty;return Math.sqrt((Math.pow(xdistan, 2) + Math.pow(ydistan, 2)));}function Firework(sx, sy, tx, ty) {this.x = sx;this.y = sy;this.sx = sx;this.sy = sy;this.tx = tx;this.ty = ty;this.targetDistances = distans(sx, sy, tx, ty);this.distancesc = 0;this.shanyu = [];this.shanyucount = 3;while (this.shanyucount--) {this.shanyu.push([this.x, this.y]);}this.angle = Math.atan2(ty - sy, tx - sx);this.speed = 2;this.jiasudu = 1.05;this.brightness = random(50, 70);this.targetRad = 5;}Firework.prototype.update = function (index) {this.shanyu.pop();this.shanyu.push([this.x, this.y]);if (this.targetRad = this.targetDistances) {createparticals(this.tx, this.ty);fireworks.splice(index, 1)} else {this.x += vx;this.y += vy;}}Firework.prototype.draw = function () {ctx.beginPath();ctx.moveTo(this.shanyu[this.shanyu.length - 1][0], this.shanyu[this.shanyu.length - 1][1]);ctx.lineTo(this.x, this.y);ctx.strokeStyle = 'hsl(' + hue + ',100%,' + this.brightness + '%)';ctx.stroke();ctx.beginPath();ctx.arc(this.tx, this.ty, this.targetRad, 0, Math.PI * 2);ctx.stroke();}function Particle(x, y) {this.x = x;this.y = y;this.shanyu = [];this.shanyucount = 10;while (this.shanyucount--) {this.shanyu.push([this.x, this.y]);}this.angle = random(0, 2 * Math.PI);this.speed = random(1, 10);this.mocal = 0.95;this.gravity = 0.98;this.hue = random(hue - 20, hue + 20);this.brightness = random(50, 80);this.alpha = 1;this.decay = random(0.015, 0.03);}Particle.prototype.update = function (index) {this.shanyu.pop();this.shanyu.unshift([this.x, this.y]);this.speed *= this.mocal;this.x += Math.cos(this.angle) * this.speed;this.y += Math.sin(this.angle) * this.speed + this.gravity;this.alpha -= this.decay;if (this.alpha = timerTotal) {fireworks.push(new Firework(clientw / 2, clienth, random(0, clientw), random(0, clienth)));timerTick = 0;} else {timerTick++;}}window.οnlοad = loop();window.onload = function starttime() {ptimer = setTimeout(starttime, 1000);}// 音乐控制unmuteButton.addEventListener('click', function () {video.muted = false;});unmuteButton2.addEventListener('click', function () {video.muted = true;});结束喽，下一篇新春特效就是下一年喽！
点赞：您的赞赏是我前进的动力！
收藏：您的支持我是创作的源泉！ ⭐
评论：您的建议是我改进的良药！ ✍
山鱼的个人社区：欢迎大家加入我的个人社区—— 山鱼社区