2025新春烟花代码（一）HTML5夜景放烟花绽放动画效果

A雄

已于 2025-01-09 15:49:36 修改

阅读量3.3k

点赞数 27

CC 4.0 BY-SA版权

分类专栏： 2025跨年烟花代码文章标签： html5 前端 html

于 2025-01-06 16:49:37 首次发布

本文链接：https://blog.youkuaiyun.com/u013343616/article/details/144966406

标题预览效果

在这里插入图片描述

标题HTML代码

<!DOCTYPE html>
<html lang="en">
<script>
  var _hmt = _hmt || [];
  (function () {
     
     
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?45f95f1bfde85c7777c3d1157e8c2d34";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>

<head>
  <meta charset="UTF-8">
  <title>2025，新春快乐！</title>
</head>
<style>
  body {
     
     
    margin: 0;
    overflow: hidden;
    background: black;
  }

  canvas {
     
     
    position: absolute;
  }
</style>

<body>

  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>

  <script>

    function GetRequest() {
     
     
      var url = decodeURI(location.search); //获取url中"?"符后的字串
      var theRequest = new Object();
      if (url.indexOf("?") != -1) {
     
     
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
     
     
          theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
      }
      return theRequest;
    }
    class Shard {
     
     
      constructor(x, y, hue) {
     
     
        this.x = x;
        this.y = y;
        this.hue = hue;
        this.lightness = 50;
        this.size = 15 + Math.random() * 10;
        const angle = Math.random() *