# 酷炫生日祝福HTML代码 以下是一个结合CSS动画和JavaScript的酷炫生日祝福页面代码： ```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 { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee); background-size: 400% 400%; animation: gradientBG 15s ease infinite; font-family: 'Arial', sans-serif; overflow: hidden; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .birthday-card { position: relative; width: 80%; max-width: 600px; background: rgba(255, 255, 255, 0.8); border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); text-align: center; z-index: 1; transform: scale(0.9); animation: scaleIn 1s forwards; } @keyframes scaleIn { to { transform: scale(1); } } h1 { color: #ff6b6b; font-size: 3rem; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } p { font-size: 1.5rem; color: #555; margin-bottom: 30px; } .balloon { position: absolute; width: 40px; height: 50px; background: #ff6b6b; border-radius: 50%; animation: float 6s ease-in-out infinite; z-index: -1; } .balloon:before { content: ""; position: absolute; width: 2px; height: 100px; background: #ccc; bottom: -100px; left: 50%; transform: translateX(-50%); } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-100px) rotate(5deg); } } .cake { font-size: 4rem; margin: 20px 0; animation: bounce 1s infinite alternate; } @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-20px); } } .confetti { position: absolute; width: 10px; height: 10px; background-color: #f00; opacity: 0; } button { background: #ff6b6b; color: white; border: none; padding: 12px 25px; font-size: 1.2rem; border-radius: 50px; cursor: pointer; transition: all 0.3s; box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4); } button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6); } button:active { transform: translateY(1px); } </style> </head> <body> <div class="birthday-card"> <h1>生日快乐！</h1> <div class="cake">🎂</div> <p>愿你的每一天都充满欢乐和惊喜！</p> <button id="celebrateBtn">点击庆祝！</button> </div> <!-- 气球元素将通过JS动态添加 --> <script> // 创建气球 function createBalloons() { const colors = ['#ff6b6b', '#48dbfb', '#1dd1a1', '#feca57', '#5f27cd']; for (let i = 0; i < 15; i++) { const balloon = document.createElement('div'); balloon.className = 'balloon'; balloon.style.left = Math.random() * 100 + 'vw'; balloon.style.top = Math.random() * 100 + 'vh'; balloon.style.background = colors[Math.floor(Math.random() * colors.length)]; balloon.style.animationDelay = Math.random() * 5 + 's'; balloon.style.transform = `scale(${Math.random() * 0.5 + 0.5})`; document.body.appendChild(balloon); } } // 创建彩色纸屑 function createConfetti() { const colors = ['#ff6b6b', '#48dbfb', '#1dd1a1', '#feca57', '#5f27cd', '#ff9ff3']; const container = document.body; for (let i = 0; i < 100; i++) { const confetti = document.createElement('div'); confetti.className = 'confetti'; confetti.style.left = Math.random() * 100 + 'vw'; confetti.style.top = -10 + 'px'; confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; confetti.style.width = Math.random() * 10 + 5 + 'px'; confetti.style.height = Math.random() * 10 + 5 + 'px'; confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0'; const animationDuration = Math.random() * 3 + 2; confetti.style.animation = `fall ${animationDuration}s linear forwards`; // 创建下落动画 const keyframes = ` @keyframes fall { to { transform: translateY(100vh) rotate(${Math.random() * 360}deg); opacity: 1; } } `; const style = document.createElement('style'); style.innerHTML = keyframes; document.head.appendChild(style); container.appendChild(confetti); } } // 点击按钮触发庆祝效果 document.getElementById('celebrateBtn').addEventListener('click', function() { createConfetti(); this.textContent = '太棒了！'; this.style.background = '#1dd1a1'; // 添加蛋糕跳动效果 const cake = document.querySelector('.cake'); cake.style.animation = 'bounce 0.5s infinite alternate'; // 3秒后停止跳动 setTimeout(() => { cake.style.animation = ''; }, 3000); }); // 页面加载时创建气球 window.onload = createBalloons; </script> </body> </html> ``` ## 代码特点 1. 渐变动画效果 2. 漂浮的气球装饰元素 3. 点击按钮触发彩色纸屑庆祝效果 4. 蛋糕表情符号跳动动画 5. 卡片缩放进入的入场动画 6. 响应式设计适应不同屏幕尺寸 ## 使用说明 1. 将代码复制到HTML文件中 2. 在浏览器中打开该文件即可看到效果 3. 点击"点击庆祝！"按钮会触发彩色纸屑效果 ## 自定义建议 1. 可以修改文本内容为特定的生日祝福语 2. 调整颜色方案以匹配生日主题 3. 添加音乐或音效增强体验 4. 可以插入实际的照片或图片 ## 注意事项 1. 动画效果可能在某些旧版本浏览器中不完全支持 2. 大量动画元素可能影响性能 3. 移动设备上的触摸事件可能需要额外处理 [2025-06-17 20:23:39 | AI写代码神器 | 1853点数解答]