index.html

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <h1>这是实现烟花点击后爆破的效果。</h1>
    <!-- 注意：Canvas不要去除fireworks类。因为脚本通过类选择器来操纵这个canvas -->
    <canvas
      class="fireworks"
      style="
        position: fixed;
        left: 0px;
        top: 0px;
        z-index: 999;
        pointer-events: none;
      "
      width="100%"
      height="100%"
    ></canvas>
    <!-- 一定要在canvas定义后再引用下面这两个js文件。因为脚本在启动时，需要先搜索canvas。 -->
    <script type="text/javascript" src="./js/anime.min.js"></script>
    <script type="text/javascript" src="./js/friework.js"></script>
    <!-- 
        在一些前端框架，如React，可以用ahooks.js中的useExternal,next.js中的<Script>标签来引用上面这两个脚本文件。
        但是需要注意：必须在canvas定义后再引入。否则会不生效。

        这两个脚本文件出处已不可考。如有兴趣可以自行研究。脚本原先是压缩版本的，我已经格式化成了可以阅读的版本。
        在部署时最好将这两个脚本压缩一下。
     -->
  </body>
</html>