如何使用HTML编写一个动态的烟花效果来呈现生日祝福页面？

要在HTML中创建动态的烟花效果来呈现生日祝福页面，你可以结合CSS动画和JavaScript来实现。下面是一个简单的步骤指南：

1. **HTML结构**:
首先，创建一个基础的HTML布局，包含一个`<div>`用于显示烟花：

   <div id="fireworks"></div>

2. **CSS样式**:
使用CSS定义烟花的基本样式，并添加关键帧动画使其看起来像是烟花绽放：

   #fireworks {
     position: relative;
     width: 400px;
     height: 400px;
   }
   
   .particle {
     position: absolute;
     top: -50px;
     left: -50px;
     width: 5px;
     height: 100px;
     background-color: rgba(255, 255, 255, 0.8);
     border-radius: 50%;
     animation: explode 3s ease infinite;
   }

   @keyframes explode {
     0% {transform: scale(0); opacity: 0;}
     50% {opacity: 1;}
     100% {transform: translateX(50%) translateY(50%) rotate(90deg) scale(0); opacity: 0;}
   }

3. **JavaScript**:
利用JavaScript生成随机位置和颜色的粒子，并将它们添加到DOM中：

   function createFirework() {
     const particle = document.createElement('div');
     particle.classList.add('particle');

     // 随机化属性
     particle.style.left = Math.random() * (document.body.offsetWidth - particle.offsetWidth) + 'px';
     particle.style.top = Math.random() * (document.body.offsetHeight - particle.offsetHeight) + 'px';
     particle.style.backgroundColor = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.random()})`;
     
     document.getElementById('fireworks').appendChild(particle);
   }

   // 每隔一段时间就创建一个新的烟花
   setInterval(createFirework, 500);

4. **优化与美化**:
可以尝试调整动画持续时间、粒子大小、颜色渐变等，以获得更生动的效果。

现在，当页面加载时，你会看到一个动态变化的烟花效果。为了更好的体验，你可以在CSS文件中使用外部资源，如CSS3动画库，或使用前端框架如Vue.js或React.js配合动画库来管理这个过程。