Hi.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>熙熙在幹嘛</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  a {
    color: white;
    font-size: 24px;
    text-decoration: none;
    background: rgba(0,0,0,0.8);
    padding: 10px 20px;
    border-radius: 10px;
  }
  #canvas {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>
<a href="#" onclick="showFireworks()">熙熙在幹嘛</a>
<canvas id="canvas"></canvas>
<script>
  function showFireworks() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    canvas.style.display = 'block';
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    function drawHeart(x, y, size) {
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.bezierCurveTo(x - size/2, y - size/2, x - size, y + size/3, x, y + size);
      ctx.bezierCurveTo(x + size, y + size/3, x + size/2, y - size/2, x, y);
      ctx.fillStyle = 'red';
      ctx.fill();
      ctx.restore();
    }
    var numberOfHearts = 100;
    for (var i = 0; i < numberOfHearts; i++) {
      var x = Math.random() * canvas.width;
      var y = Math.random() * canvas.height;
      var size = Math.random() * 20 + 10;
      drawHeart(x, y, size);
    }
    setTimeout(function() { canvas.style.display = 'none'; }, 3000);
  }
</script>
</body>
</html>