*2022年圣诞节到来啦，很高兴这次我们又能一起度过~
文章目录
- 一、前言
- 二、跨年烟花
- 三、效果展示
- 五、HTML源码
一、前言
时光荏苒，白驹过隙。
2022这一年又在忙碌中度过了，过去的一年，我们同努力，我们共欢笑，每一次成功都蕴藏着我们辛勤的劳动。
新的一年即将来到，我们不能停滞不前，一味只是骄傲。愿大家与时俱进，拼搏不懈，共创新的辉煌！
借着新年到来的喜庆，给大家分享一个新年烟花的前端代码，快拿着代码展示给你的朋友们看吧！！
转眼间已经到了2022的尾巴，这一年对于国家来说丰富充实,冬奥会在北京举行、中国共产党第二十次全国代表大会召开、社会共同抗击疫情的第三年、我国完成天宫空间站建造……对于我们每一个个体，2022也承载着我们的快乐与悲伤，它是无法替代的。
新的一年马上就要到了，让我们告别2022，迎接2023！
希望2023,全糖去冰。
二、跨年烟花
本文是一篇简单的前端代码，主要内容有HTML，JS，CSS等内容
- HTML代码
- JS代码
- CSS样式
- 插件等
- 可根据需求自定义文字
- 背景音乐
- 倒计时
三、效果展示
文末有完整的HTML代码，直接复制就能用。接下来我们一起来看看效果吧！！！
倒计时效果展示
2023 字体效果展示
兔圆圆 字体效果展示
五、HTML源码
嫌麻烦？点这里直接下载(无需积分)
- index.html
烟花，雪花，背景音乐，页面样式在这里实现的哦
时光荏苒，白驹过隙！ html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; background: #000; } CommandsInfoShare
function initVars() { pi = Math.PI; ctx = canvas.getContext("2d"); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; cx = canvas.width / 2; cy = canvas.height / 2; playerZ = -25; playerX = playerY = playerVX = playerVY = playerVZ = pitch = yaw = pitchV = yawV = 0; scale = 600; seedTimer = 0; (seedInterval = 5), (seedLife = 100); gravity = 0.02; seeds = new Array(); sparkPics = new Array(); s = "https://cantelope.org/NYE/"; for (i = 1; i 0 && ua 0 && ub < 1) { return { x: cx + (rx1 + ua * (rx2 - rx1)) * scale, y: cy + (y / z) * scale, d: Math.sqrt(x * x + y * y + z * z), }; } else { return { x: cx + (rx1 + ua * (rx2 - rx1)) * scale, y: cy + (y / z) * scale, d: -1, }; } } function spawnSeed() { seed = new Object(); seed.x = -50 + Math.random() * 100; seed.y = 25; seed.z = -50 + Math.random() * 100; seed.vx = 0.1 - Math.random() * 0.2; seed.vy = -1.5; //*(1+Math.random()/2); seed.vz = 0.1 - Math.random() * 0.2; seed.born = frames; seeds.push(seed); } function splode(x, y, z) { t = 5 + parseInt(Math.random() * 150); sparkV = 1 + Math.random() * 2.5; type = parseInt(Math.random() * 3); switch (type) { case 0: pic1 = parseInt(Math.random() * 10); break; case 1: pic1 = parseInt(Math.random() * 10); do { pic2 = parseInt(Math.random() * 10); } while (pic2 == pic1); break; case 2: pic1 = parseInt(Math.random() * 10); do { pic2 = parseInt(Math.random() * 10); } while (pic2 == pic1); do { pic3 = parseInt(Math.random() * 10); } while (pic3 == pic1 || pic3 == pic2); break; } for (m = 1; m 0) { ctx.globalAlpha = a; ctx.fillRect( point.x - size / 2, point.y - size / 2, size, size ); } } } } ctx.globalAlpha = 1; for (i = 0; i < seeds.length; ++i) { point = rasterizePoint(seeds[i].x, seeds[i].y, seeds[i].z); if (point.d != -1) { size = 200 / (1 + point.d); ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size); } } point1 = new Object(); for (i = 0; i < sparks.length; ++i) { point = rasterizePoint(sparks[i].x, sparks[i].y, sparks[i].z); if (point.d != -1) { size = (sparks[i].radius * 200) / (1 + point.d); if (sparks[i].alpha = 0; --j) { point2 = rasterizePoint( sparks[i].trail[j].x, sparks[i].trail[j].y, sparks[i].trail[j].z ); if (point2.d != -1) { ctx.globalAlpha = ((j / sparks[i].trail.length) * sparks[i].alpha) / 2; ctx.beginPath(); ctx.moveTo(point1.x, point1.y); ctx.lineWidth = 1 + (sparks[i].radius * 10) / (sparks[i].trail.length - j) / (1 + point2.d); ctx.lineTo(point2.x, point2.y); ctx.stroke(); point1.x = point2.x; point1.y = point2.y; } } } ctx.globalAlpha = sparks[i].alpha; ctx.drawImage( sparks[i].img, point.x - size / 2, point.y - size / 2, size, size ); } } } function frame() { if (frames > 100000) { seedTimer = 0; frames = 0; } frames++; draw(); doLogic(); requestAnimationFrame(frame); } window.addEventListener("resize", () => { canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; cx = canvas.width / 2; cy = canvas.height / 2; }); initVars(); frame(); $("#cnblogs_post_body img").attr("data-action", "zoom"); !(function () { function n(n, e, t) { return n.getAttribute(e) || t; } function e(n) { return document.getElementsByTagName(n); } function t() { var t = e("script"), o = t.length, i = t[o - 1]; return { l: o, z: n(i, "zIndex", -1), o: n(i, "opacity", 0.6), c: n(i, "color", "148,0,211"), n: n(i, "count", 99), }; } function o() { (a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth), (c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight); } function i() { r.clearRect(0, 0, a, c); var n, e, t, o, m, l; s.forEach(function (i, x) { for ( i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x c || i.y < 0 ? -1 : 1, r.fillRect(i.x - 0.5, i.y - 0.5, 1, 1), e = x + 1; e < u.length; e++ ) (n = u[e]), null !== n.x && null !== n.y && ((o = i.x - n.x), (m = i.y - n.y), (l = o * o + m * m), l = n.max / 2 && ((i.x -= 0.03 * o), (i.y -= 0.03 * m)), (t = (n.max - l) / n.max), r.beginPath(), (r.lineWidth = t / 2), (r.strokeStyle = "rgba(" + d.c + "," + (t + 0.2) + ")"), r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke())); }), x(i); } var a, c, u, m = document.createElement("canvas"), d = t(), l = "c_n" + d.l, r = m.getContext("2d"), x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (n) { window.setTimeout(n, 1e3 / 45); }, w = Math.random, y = { x: null, y: null, max: 2e4 }; (m.id = l), (m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o), e("body")[0].appendChild(m), o(), (window.onresize = o), (window.onmousemove = function (n) { (n = n || window.event), (y.x = n.clientX), (y.y = n.clientY); }), (window.onmouseout = function () { (y.x = null), (y.y = null); }); for (var s = [], f = 0; d.n > f; f++) { var h = w() * a, g = w() * c, v = 2 * w() - 1, p = 2 * w() - 1; s.push({ x: h, y: g, xa: v, ya: p, max: 6e3 }); } (u = s.concat([y])), setTimeout(function () { i(); }, 100); })(); (function ($) { $.fn.snow = function (options) { var $flake = $('') .css({ position: "absolute", "z-index": "9999", top: "-50px" }) .html("❄"), documentHeight = $(document).height(), documentWidth = $(document).width(), defaults = { minSize: 10, maxSize: 20, newOn: 1000, flakeColor: "#00CED1" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */, }, options = $.extend({}, defaults, options); var interval = setInterval(function () { var startPositionLeft = Math.random() * documentWidth - 100, startOpacity = 0.5 + Math.random(), sizeFlake = options.minSize + Math.random() * options.maxSize, endPositionTop = documentHeight - 200, endPositionLeft = startPositionLeft - 500 + Math.random() * 500, durationFall = documentHeight * 10 + Math.random() * 5000; $flake .clone() .appendTo("body") .css({ left: startPositionLeft, opacity: startOpacity, "font-size": sizeFlake, color: options.flakeColor, }) .animate( { top: endPositionTop, left: endPositionLeft, opacity: 0.2, }, durationFall, "linear", function () { $(this).remove(); } ); }, options.newOn); }; })(jQuery); $(function () { $.fn.snow({ minSize: 5 /* 定义雪花最小尺寸 */, maxSize: 80 /* 定义雪花最大尺寸 */, newOn: 200 /* 定义密集程度，数字越小越密集 */, }); });
- index.js
自定义文字在这里实现的哦
var S = { init: function () { var action = window.location.href, i = action.indexOf('?a='); S.Drawing.init('.canvas'); document.body.classList.add('body--ready'); if (i !== -1) { S.UI.simulate(decodeURI(action).substring(i + 3)); } else { S.UI.simulate('|#countdown 3||2023|兔圆圆||#rectangle|'); // S.UI.simulate('|写|尽|千|山|落|笔|是|你|#rectangle|'); } S.Drawing.loop(function () { S.Shape.render(); }); }}; S.Drawing = (function () { var canvas, context, renderFn requestFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; return { init: function (el) { canvas = document.querySelector(el); context = canvas.getContext('2d'); this.adjustCanvas(); window.addEventListener('resize', function (e) { S.Drawing.adjustCanvas(); }); }, loop: function (fn) { renderFn = !renderFn ? fn : renderFn; this.clearFrame(); renderFn(); requestFrame.call(window, this.loop.bind(this)); }, adjustCanvas: function () { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }, clearFrame: function () { context.clearRect(0, 0, canvas.width, canvas.height); }, getArea: function () { return { w: canvas.width, h: canvas.height }; }, drawCircle: function (p, c) { context.fillStyle = c.render(); context.beginPath(); context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true); context.closePath(); context.fill(); } }}()); S.UI = (function () { var canvas = document.querySelector('.canvas'), interval, isTouch = false, //('ontouchstart' in window || navigator.msMaxTouchPoints), currentAction, resizeTimer, time, maxShapeSize = 30, firstAction = true, sequence = [], cmd = '#'; function formatTime(date) { var h = date.getHours(), m = date.getMinutes(), m = m < 10 ? '0' + m : m; return h + ':' + m; } function getValue(value) { return value && value.split(' ')[1]; } function getAction(value) { value = value && value.split(' ')[0]; return value && value[0] === cmd && value.substring(1); } function timedAction(fn, delay, max, reverse) { clearInterval(interval); currentAction = reverse ? max : 1; fn(currentAction); if (!max || (!reverse && currentAction 0)) { interval = setInterval(function () { currentAction = reverse ? currentAction - 1 : currentAction + 1; fn(currentAction); if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) { clearInterval(interval); } }, delay); } } function reset(destroy) { clearInterval(interval); sequence = []; time = null; destroy && S.Shape.switchShape(S.ShapeBuilder.letter('')); } function performAction(value) { var action, value, current; // overlay.classList.remove('overlay--visible'); sequence = typeof(value) === 'object' ? value : sequence.concat(value.split('|')); // input.value = ''; // checkInputWidth(); timedAction(function (index) { current = sequence.shift(); action = getAction(current); value = getValue(current); switch (action) { case 'countdown': value = parseInt(value) || 10; value = value > 0 ? value : 10; timedAction(function (index) { if (index === 0) { if (sequence.length === 0) { S.Shape.switchShape(S.ShapeBuilder.letter('')); } else { performAction(sequence); } } else { S.Shape.switchShape(S.ShapeBuilder.letter(index), true); } }, 1000, value, true); break; case 'rectangle': value = value && value.split('x'); value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2]; S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0])), Math.min(maxShapeSize, parseInt(value[1])))); break; case 'circle': value = parseInt(value) || maxShapeSize; value = Math.min(value, maxShapeSize); S.Shape.switchShape(S.ShapeBuilder.circle(value)); break; case 'time': var t = formatTime(new Date()); if (sequence.length > 0) { S.Shape.switchShape(S.ShapeBuilder.letter(t)); } else { timedAction(function () { t = formatTime(new Date()); if (t !== time) { time = t; S.Shape.switchShape(S.ShapeBuilder.letter(time)); } }, 1000); } break; default: S.Shape.switchShape(S.ShapeBuilder.letter(current[0] === cmd ? 'What?' : current)); } }, 2000, sequence.length); } function checkInputWidth(e) { if (input.value.length > 18) { ui.classList.add('ui--wide'); } else { ui.classList.remove('ui--wide'); } if (firstAction && input.value.length > 0) { ui.classList.add('ui--enter'); } else { ui.classList.remove('ui--enter'); } } function bindEvents() { document.body.addEventListener('keydown', function (e) { input.focus(); if (e.keyCode === 13) { firstAction = false; reset(); performAction(input.value); } }); canvas.addEventListener('click', function (e) { overlay.classList.remove('overlay--visible'); }); } function init() { bindEvents(); // input.focus(); isTouch && document.body.classList.add('touch'); } // Init init(); return { simulate: function (action) { performAction(action); } }}());S.UI.Tabs = (function () { var tabs = document.querySelector('.tabs'), labels = document.querySelector('.tabs-labels'), triggers = document.querySelectorAll('.tabs-label'), panels = document.querySelectorAll('.tabs-panel'); function activate(i) { triggers[i].classList.add('tabs-label--active'); panels[i].classList.add('tabs-panel--active'); } function bindEvents() { labels.addEventListener('click', function (e) { var el = e.target, index; if (el.classList.contains('tabs-label')) { for (var t = 0; t 1) { this.p.x -= ((dx / d) * e); this.p.y -= ((dy / d) * e); } else { if (this.p.h > 0) { this.p.h--; } else { return true; } } return false; }, _update: function () { if (this._moveTowards(this.t)) { var p = this.q.shift(); if (p) { this.t.x = p.x || this.p.x; this.t.y = p.y || this.p.y; this.t.z = p.z || this.p.z; this.t.a = p.a || this.p.a; this.p.h = p.h || 0; } else { if (this.s) { this.p.x -= Math.sin(Math.random() * 3.142); this.p.y -= Math.sin(Math.random() * 3.142); } else { this.move(new S.Point({ x: this.p.x + (Math.random() * 50) - 25, y: this.p.y + (Math.random() * 50) - 25, })); } } } d = this.p.a - this.t.a; this.p.a = Math.max(0.1, this.p.a - (d * 0.05)); d = this.p.z - this.t.z; this.p.z = Math.max(1, this.p.z - (d * 0.05)); }, distanceTo: function (n, details) { var dx = this.p.x - n.x, dy = this.p.y - n.y, d = Math.sqrt(dx * dx + dy * dy); return details ? [dx, dy, d] : d; }, move: function (p, avoidStatic) { if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) { this.q.push(p); } }, render: function () { this._update(); this._draw(); }}S.ShapeBuilder = (function () { var gap = 13, shapeCanvas = document.createElement('canvas'), shapeContext = shapeCanvas.getContext('2d'), fontSize = 500, fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif'; function fit() { shapeCanvas.width = Math.floor(window.innerWidth / gap) * gap; shapeCanvas.height = Math.floor(window.innerHeight / gap) * gap; shapeContext.fillStyle = 'red'; shapeContext.textBaseline = 'middle'; shapeContext.textAlign = 'center'; } function processCanvas() { var pixels = shapeContext.getImageData(0, 0, shapeCanvas.width, shapeCanvas.height).data; dots = [], pixels, x = 0, y = 0, fx = shapeCanvas.width, fy = shapeCanvas.height, w = 0, h = 0; for (var p = 0; p 0) { dots.push(new S.Point({ x: x, y: y })); w = x > w ? x : w; h = y > h ? y : h; fx = x < fx ? x : fx; fy = y = shapeCanvas.width) { x = 0; y += gap; p += gap * 4 * shapeCanvas.width; } } return { dots: dots, w: w + fx, h: h + fy }; } function setFontSize(s) { shapeContext.font = 'bold ' + s + 'px ' + fontFamily; } function isNumber(n) { return !isNaN(parseFloat(n)) && isFinite(n); } function init() { fit(); window.addEventListener('resize', fit); } // Init init(); return { imageFile: function (url, callback) { var image = new Image(), a = S.Drawing.getArea(); image.onload = function () { shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height); shapeContext.drawImage(this, 0, 0, a.h * 0.6, a.h * 0.6); callback(processCanvas()); }; image.onerror = function () { callback(S.ShapeBuilder.letter('What?')); } image.src = url; }, circle: function (d) { var r = Math.max(0, d) / 2; shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height); shapeContext.beginPath(); shapeContext.arc(r * gap, r * gap, r * gap, 0, 2 * Math.PI, false); shapeContext.fill(); shapeContext.closePath(); return processCanvas(); }, letter: function (l) { var s = 0; setFontSize(fontSize); s = Math.min(fontSize, (shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize, (shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize); setFontSize(s); shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height); shapeContext.fillText(l, shapeCanvas.width / 2, shapeCanvas.height / 2); return processCanvas(); }, rectangle: function (w, h) { var dots = [], width = gap * w, height = gap * h; for (var y = 0; y < height; y += gap) { for (var x = 0; x < width; x += gap) { dots.push(new S.Point({ x: x, y: y, })); } } return { dots: dots, w: width, h: height }; } };}());S.Shape = (function () { var dots = [], width = 0, height = 0, cx = 0, cy = 0; function compensate() { var a = S.Drawing.getArea(); cx = a.w / 2 - width / 2; cy = a.h / 2 - height / 2; } return { shuffleIdle: function () { var a = S.Drawing.getArea(); for (var d = 0; d dots.length) { size = n.dots.length - dots.length; for (var d = 1; d 0) { i = Math.floor(Math.random() * n.dots.length); dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11); if (dots[d].s) { dots[d].move(new S.Point({ z: Math.random() * 20 + 10, a: Math.random(), h: 18 })); } else { dots[d].move(new S.Point({ z: Math.random() * 5 + 5, h: fast ? 18 : 30 })); } dots[d].s = true; dots[d].move(new S.Point({ x: n.dots[i].x + cx, y: n.dots[i].y + cy, a: 1, z: 5, h: 0 })); n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1)); d++; } for (var i = d; i < dots.length; i++) { if (dots[i].s) { dots[i].move(new S.Point({ z: Math.random() * 20 + 10, a: Math.random(), h: 20 })); dots[i].s = false; dots[i].e = 0.04; dots[i].move(new S.Point({ x: Math.random() * a.w, y: Math.random() * a.h, a: 0.3, //.4 z: Math.random() * 4, h: 0 })); } } }, render: function () { for (var d = 0; d < dots.length; d++) { dots[d].render(); } } }}());S.init();