HTML新春烟花

🕗 发布于 2025-01-21 06:46 html 前端

系列文章

序号	目录
1	HTML满屏跳动的爱心（可写字）
2	HTML五彩缤纷的爱心
3	HTML满屏漂浮爱心
4	HTML情人节快乐
5	HTML蓝色爱心射线
6	HTML跳动的爱心（简易版）
7	HTML粒子爱心
8	HTML蓝色动态爱心
9	HTML跳动的爱心（双心版）
10	HTML橙色动态粒子爱心
11	HTML旋转爱心
12	HTML爱情树
13	HTML3D相册
14	HTML旋转相册
15	HTML基础烟花秀
16	HTML炫酷烟花秀
17	HTML粉色烟花秀
18	HTML新春烟花
19	HTML跨年烟花
20	HTML音乐圣诞树
21	HTML大雪纷飞
22	HTML想见你
23	HTML元素周期表
24	HTML飞舞的花瓣
25	HTML星空特效
26	HTML黑客帝国字母雨
27	HTML哆啦A梦
28	HTML流星雨
29	HTML沙漏爱心
30	HTML爱心字母雨
31	HTML爱心流星雨
32	HTML生日蛋糕
33	HTML3D旋转相册
34	HTML流光爱心
35	HTML满屏飘字
36	HTML飞舞爱心
37	HTML星空圣诞树
38	HTML礼物圣诞树
39	HTML粉色爱心

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

写在前面

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等，简化了开发过程，并提高了页面加载速度。

完整代码

<!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. 总结

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

写在后面

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

原文地址：https://blog.csdn.net/m0_68111267/article/details/145259853

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：doris 2.1 Queries Acceleration-Hints 学习笔记
下一篇：云原生作业（四）

Linux系统下安装配置 Nginx 超详细图文教程_linux安装nginx
1、修改配置端口和默认访问页面#找到nginx的配置文件，编辑#这里放置的是nginx默认显示的页面。
阅读更多2025-01-21
JWT（JSON Web Token）
JWT是一个开放标准（RFC 7519），它定义了一种紧凑且自包含的方式，用于将信息作为JSON对象在各方之间安全地传输。JWT通常用于在Web应用和API安全中，作为访问令牌（access toke
阅读更多2025-01-21
WGAN - 瓦萨斯坦生成对抗网络
WGAN的提出旨在通过引入Wasserstein距离来解决传统GAN中的上述问题。Wasserstein距离是一种度量两个分布之间距离的方法，它可以有效地避免传统GAN中存在的梯度消失问题，并且提供更
阅读更多2025-01-21
Web3 游戏周报（1.13 - 1.19）
回顾上周的区块链游戏概况，查看与 ABGA 最新发布的数据报告。
阅读更多2025-01-21
鸿蒙开发中的骨架图：提升用户体验的关键一环
骨架图，简单来说，是一种在数据尚未加载完成时，展示页面大致结构的占位图形。它就像一个精心搭建的建筑蓝图🏗️，以简洁的线条和几何形状勾勒出页面的主要元素，如标题栏、列表项、图片区域等。当用户打开应用，首
阅读更多2025-01-21
AI 在人形机器人发展中的作用
本文主要探讨了 AI 在人形机器人发展中的关键作用。通过对相关技术和应用案例的分析，阐述了 AI 如何赋予人形机器人智能感知、学习决策、自然语言处理及运动控制等能力，推动人形机器人在多领域的应用和产业
阅读更多2025-01-21
Ubuntu 22.04 能识别笔记本的键盘，但是无法识别外接键盘
【代码】Ubuntu22.04能识别笔记本的键盘，但是无法识别外接键盘。
阅读更多2025-01-21
cmake 可使用的构建系统
cmake可使用的构建系统。
阅读更多2025-01-21
# 03_docker容器化技术精讲（三）
21-dockerfile-案例-自定义centos21-dockerfile-案例-部署springboot项目22-dockercompose-概述23-dockercompose-安装使用24-
阅读更多2025-01-21
从零开始：使用 Brain.js 创建你的第一个神经网络（一）
本文是Brain.js系列的基础篇，主要面向零基础或有一定开发经验的读者，讲解如何使用Brain.js快速搭建一个简单的二分类模型。文章详细介绍了Brain.js的背景与特点、项目初始化、依赖安装、训
阅读更多2025-01-21

HTML新春烟花

系列文章

写在前面

技术需求

完整代码

下载代码

代码分析

1. HTML 基础结构

2. 引入外部脚本与样式

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

2.2 引入 Live2D 动效

2.3 引入图片放大功能

2.4 引入鼠标特效

2.5 音乐播放器

2.6 随机线条特效

3. 雪花特效

4. 整体设计与效果

4.1 页面背景与气氛

4.2 技术实现

5. 总结

写在后面

相关文章

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