HTML新春烟花 - 技术栈

HTML5：
- 使用了<canvas>标签用于绘制动态效果（如随机线条、雪花飘落等）。
- 基本的HTML结构，定义了页面的头部和主体内容。
CSS3：
- 用于设置样式，特别是背景和元素布局。
- position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;等样式用于确保画布元素始终显示在最前面，并防止其与用户交互。
JavaScript：
- DOM操作：通过JavaScript操作页面元素，控制特效的生成和行为。
- 动画效果 ：使用requestAnimationFrame和setInterval等方法实现高效的动画效果，如随机线条的绘制和雪花的飘落。
- 事件监听：监听鼠标事件（如点击、移动等），为用户提供动态反馈和互动体验。
外部库：
- jQuery：简化DOM操作、动画实现以及事件处理。用于雪花特效和图片放大效果。
- Bootstrap ：提供了部分样式支持，尤其是在布局和交互方面（如使用transition.js实现元素的平滑过渡）。
- APlayer：用于实现背景音乐播放，提供了易于使用的音乐播放器界面和控制功能。
- Meting.js ：通过<meting-js>标签从网易云音乐加载音乐播放列表，结合APlayer实现音乐的流式播放。
Live2D：
- 引入外部的Live2D库，用于加载和渲染动态2D角色模型（如人物表情和动作等），增加页面的互动性和趣味性。
Canvas技术：
- 通过<canvas>元素和2D上下文API绘制图形。多个动态效果，如随机生成的线条、雪花飘落等，均是通过Canvas进行绘制和动画处理的。
外部CDN服务：
- 引用了多个CDN资源，如APlayer、Meting.js、jQuery、Bootstrap等，简化了开发过程，并提高了页面加载速度。

完整代码

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>新年快乐</title>
</head>

<body>
  <script src="js/gameCanvas-4.0.js"></script>
  <script src="js/script.js"></script>
  <!--live2d-->
  <script src="https://blog-static.cnblogs.com/files/zouwangblog/autoload.js"></script>
  <!--live2dend-->

  <!--放大图片-->
  <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/zouwangblog/zoom.css" />
  <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>
  <script src="https://blog-static.cnblogs.com/files/zouwangblog/zoom.js"></script>
  <script type="text/javascript">
    $("#cnblogs_post_body img").attr("data-action", "zoom");
  </script>
  <!--放大图片end-->

  <!--鼠标特效-->
  <script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script>
  <canvas width="1777" height="841" style="
        position: fixed;
        left: 0px;
        top: 0px;
        z-index: 2147483647;
        pointer-events: none;
      "></canvas>
  <!--鼠标特效 end-->

  <!-- require APlayer -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
  <!-- require MetingJS -->
  <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
  <meting-js id="2829883282" lrc-type="0" server="netease" order="random" type="playlist" fixed="true" autoplay="false"
    list-olded="true">
  </meting-js>

  <!-- 随机线条 -->
  <script>
    !(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 < 0 ? -1 : 1,
            i.ya *= i.y > 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 &&
                (n === y &&
                  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);
    })();
  </script>

  <!-- 雪花特效 -->
  <script type="text/javascript">
    (function ($) {
      $.fn.snow = function (options) {
        var $flake = $('<div id="snowbox" />')
          .css({ position: "absolute", "z-index": "9999", top: "-50px" })
          .html("❄"),
          documentHeight = $(document).height(),
          documentWidth = $(document).width(),
          defaults = {
            minSize: 10,
            maxSize: 20,
            newOn: 1000,
            flakeColor:
              "#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 /* 定义密集程度，数字越小越密集 */,
      });
    });
  </script>
</body>

</html>

下载代码

下载链接：https://pan.quark.cn/s/a87ae62622dd

代码分析

这段HTML代码主要实现了一个动态且富有节日气氛的页面，包含了多个前端特效，如鼠标点击特效、雪花飘落特效、背景音乐播放器、以及图片放大特效。页面的整体效果适用于节庆活动或祝福场合。以下将详细分析各部分代码的功能和实现方式。

1. HTML 基础结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>新年快乐</title>
</head>
<body>
  ...
</body>
</html>

这一部分定义了HTML文档的基础结构：

<!DOCTYPE html>：声明文档类型为HTML5。
<html lang="en">：指定文档的语言为英语。
<meta charset="UTF-8" />：设置字符编码为UTF-8，确保支持多语言字符集。
<title>新年快乐</title>：为页面设置了标题，显示为"新年快乐"。

2. 引入外部脚本与样式

页面包含了多个外部脚本和样式的引用，这些脚本和样式实现了不同的功能和特效。

2.1 引入`gameCanvas-4.0.js`与`script.js`

<script src="js/gameCanvas-4.0.js"></script>
<script src="js/script.js"></script>

这两行脚本引入了gameCanvas-4.0.js和script.js，虽然代码中没有显示这两个文件的具体内容，但根据命名可以推测，它们可能涉及到一个游戏或动态画布的实现，提供画布绘图、动画等功能。

2.2 引入 Live2D 动效

<script src="https://blog-static.cnblogs.com/files/zouwangblog/autoload.js"></script>

这段代码引入了autoload.js，这是一个外部库，用于加载Live2D模型。Live2D是一个可以在网页上显示2D角色模型并使其动起来的技术，通常用于实现角色动画效果，如表情、动作等。这个特效一般用于增强用户互动感或提升页面的动态效果。

2.3 引入图片放大功能

<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/zouwangblog/zoom.css" />
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>
<script src="https://blog-static.cnblogs.com/files/zouwangblog/zoom.js"></script>

这一部分代码引入了图片放大的CSS和JavaScript库。通过引用zoom.css和zoom.js，以及jQuery库，它为页面中的图片添加了放大查看的功能。具体实现是：当用户点击图片时，图片会放大并显示在页面的中心，提升了用户体验。data-action="zoom"属性被设置在图片元素上，表示这些图片可以被放大。

2.4 引入鼠标特效

<script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

mouse-click.js脚本通过监听用户的鼠标点击事件，生成动态的点击效果，常用于提升页面的互动性。这些动态效果会显示在画布<canvas>元素上。<canvas>元素的样式设置使得它始终显示在页面的最上层，且不与页面其他元素交互（pointer-events: none）。

2.5 音乐播放器

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" />
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js id="2829883282" lrc-type="0" server="netease" order="random" type="playlist" fixed="true" autoplay="false" list-olded="true">
</meting-js>

这部分代码实现了页面背景音乐播放功能。APlayer是一个流行的音频播放器，Meting.js是一个音频API，用于播放来自网易云音乐等服务的音乐。<meting-js>标签配置了一个播放列表，指定了网易云音乐作为音源服务器，并设置了一些播放器参数，如autoplay（是否自动播放）和order（播放顺序）。通过这些配置，页面可以根据需求自动播放背景音乐。

2.6 随机线条特效

<script>
  !(function () {
    function n(n, e, t) {
      return n.getAttribute(e) || t;
    }
    ...
  })();
</script>

这段代码实现了一个动态的随机线条效果。通过在浏览器中绘制随机生成的线条，并使它们根据特定规则运动，创造出一种星空或者流动的视觉效果。<canvas>元素被用来绘制这些线条，requestAnimationFrame用于高效地进行动画渲染。线条的运动方向和位置会随着页面窗口的大小变化而调整，确保在不同屏幕上都有良好的效果。

3. 雪花特效

<script type="text/javascript">
  (function ($) {
    $.fn.snow = function (options) {
      ...
    };
  })(jQuery);
  $(function () {
    $.fn.snow({
      minSize: 5,
      maxSize: 80,
      newOn: 200,
    });
  });
</script>

这一段实现了雪花飘落的效果。通过使用jQuery库，创建了一个插件$.fn.snow，该插件可以在页面中生成不同大小、不同速度的雪花。雪花的位置、大小和透明度都由随机数控制，使得每次加载页面时雪花效果都具有一定的随机性。setInterval函数用于定期生成雪花，animate函数则控制雪花从顶部飘落到页面底部的动画效果。

4. 整体设计与效果

4.1 页面背景与气氛

这段代码使用了多种动态特效来增强页面的节日气氛。背景音乐的播放、雪花的飘落以及鼠标点击特效等都增加了页面的互动性和趣味性。结合"新年快乐"这一主题，页面可以用于新年祝福、节庆活动等场合，通过这些特效营造出一种欢庆和喜庆的氛围。

4.2 技术实现

Canvas技术 ：多个特效都使用了<canvas>元素来绘制图形（如随机线条、雪花特效等），通过JavaScript动态控制画布上的图形内容，达到了动画效果。
jQuery库：许多特效（如图片放大、雪花飘落等）都依赖于jQuery库，它简化了DOM操作和动画实现。
外部库 ：如APlayer和Meting.js提供了方便的音乐播放功能，Live2D技术则提供了二维动画效果，使得页面更加生动和富有动感。

5. 总结

整体而言，这段代码通过多个前端特效和技术的结合，创造了一个互动性强、视觉效果丰富的页面。无论是雪花飘落、鼠标点击特效，还是背景音乐播放，都能够增强用户的体验感，营造出温馨、欢乐的氛围。它适用于节庆活动、祝福页面或互动式展示，能够吸引用户的注意力并提供愉悦的浏览体验。

写在后面

我是一只有趣的兔子，感谢你的喜欢。