html点击按钮出现庆祝动画

好的，我可以给你提供一个简单的示例代码，演示如何实现在 HTML 页面上点击按钮后出现庆祝动画。

首先，我们需要在 HTML 页面中创建一个按钮，如下所示：

<button id="celebrate-button">庆祝一下</button>

然后，我们使用 CSS 和 JavaScript 来实现庆祝动画。示例代码如下：

<style>
  /* 定义庆祝动画样式 */
  .confetti {
    width: 10px;
    height: 10px;
    background-color: #f00;
    position: fixed;
    top: -10px;
    animation: confetti-fall 2s ease-out both;
  }

  /* 定义庆祝动画的关键帧 */
  @keyframes confetti-fall {
    0% {
      transform: translate3d(0, -300%, 0) rotate(0deg);
    }
    100% {
      transform: translate3d(0, 0, 0) rotate(360deg);
    }
  }
</style>

<script>
  // 获取庆祝按钮元素
  const btn = document.getElementById('celebrate-button');

  // 在按钮上添加点击事件监听器
  btn.addEventListener('click', () => {
    // 创建庆祝动画元素
    const confetti = document.createElement('div');
    confetti.classList.add('confetti');
    confetti.style.left = Math.random() * 100 + '%'; // 随机位置
    confetti.style.animationDelay = Math.random() * 2 + 's'; // 随机延迟

    // 将庆祝动画元素添加到页面中
    document.body.appendChild(confetti);

    // 动画结束后，将庆祝动画元素从页面中移除
    confetti.addEventListener('animationend', () => {
      confetti.parentNode.removeChild(confetti);
    });
  });
</script>

上述代码中，我们定义了一个 `.confetti` 样式，用于设置庆祝动画的样式。然后，我们使用 JavaScript 在按钮点击时动态创建一个 `.confetti` 元素，并将其添加到页面中。最后，我们在庆祝动画结束时将其从页面中移除。

这只是一个简单的庆祝动画示例，你可以根据自己的需求进行修改和扩展。希望这能对你有所帮助！