*2022年圣诞节到来啦,很高兴这次我们又能一起度过~


文章目录

  • 一、前言
  • 二、跨年烟花
  • 三、效果展示
  • 五、HTML源码

一、前言

时光荏苒,白驹过隙。

2022这一年又在忙碌中度过了,过去的一年,我们同努力,我们共欢笑,每一次成功都蕴藏着我们辛勤的劳动。

新的一年即将来到,我们不能停滞不前,一味只是骄傲。愿大家与时俱进,拼搏不懈,共创新的辉煌!

借着新年到来的喜庆,给大家分享一个新年烟花的前端代码,快拿着代码展示给你的朋友们看吧!!

转眼间已经到了2022的尾巴,这一年对于国家来说丰富充实,冬奥会在北京举行、中国共产党第二十次全国代表大会召开、社会共同抗击疫情的第三年、我国完成天宫空间站建造……对于我们每一个个体,2022也承载着我们的快乐与悲伤,它是无法替代的。

新的一年马上就要到了,让我们告别2022,迎接2023!

希望2023,全糖去冰。

二、跨年烟花

本文是一篇简单的前端代码,主要内容有HTML,JS,CSS等内容

  1. HTML代码
  2. JS代码
  3. CSS样式
  4. 插件等
  5. 可根据需求自定义文字
  6. 背景音乐
  7. 倒计时

三、效果展示

文末有完整的HTML代码,直接复制就能用。接下来我们一起来看看效果吧!!!

倒计时效果展示

2023 字体效果展示

兔圆圆 字体效果展示

五、HTML源码

嫌麻烦?点这里直接下载(无需积分)

  1. 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 /* 定义密集程度,数字越小越密集 */, }); });
    1. 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();