# 酷炫生日祝福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; background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee); background-size: 400% 400%; animation: gradientBG 15s ease infinite; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; 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 { background-color: 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; max-width: 500px; z-index: 10; position: relative; transform: scale(0); animation: cardAppear 1s ease forwards; } @keyframes cardAppear { 100% { transform: scale(1); } } h1 { color: #ff6b6b; font-size: 2.5rem; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } p { color: #555; font-size: 1.2rem; line-height: 1.6; } .balloon { position: absolute; width: 50px; height: 65px; background-color: #ff6b6b; border-radius: 50%; animation: float 6s ease-in-out infinite; z-index: 1; } .balloon:before { content: ""; position: absolute; width: 2px; height: 50px; background-color: #555; bottom: -50px; left: 50%; transform: translateX(-50%); } .balloon:nth-child(2n) { background-color: #4ecdc4; } .balloon:nth-child(3n) { background-color: #ffbe76; } .balloon:nth-child(4n) { background-color: #a55eea; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-100px) rotate(-5deg); } } .cake { width: 150px; height: 100px; margin: 30px auto; position: relative; } .plate { width: 180px; height: 30px; background: #f5f5f5; border-radius: 50%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .layer { width: 150px; height: 40px; background: linear-gradient(to right, #ff9a9e, #fad0c4); border-radius: 10px; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); } .layer.top { height: 30px; bottom: 70px; background: linear-gradient(to right, #fad0c4, #fbc2eb); } .candle { width: 10px; height: 40px; background: #fff; position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 2; } .flame { width: 15px; height: 30px; background: #ffbe76; border-radius: 50% 50% 20% 20%; position: absolute; bottom: 140px; left: 50%; transform: translateX(-50%); animation: flicker 0.5s ease infinite alternate; box-shadow: 0 0 20px #ffbe76, 0 0 40px #ffbe76, 0 0 60px #ffbe76; } @keyframes flicker { 0% { transform: translateX(-50%) scale(1); opacity: 1; } 100% { transform: translateX(-50%) scale(1.1); opacity: 0.8; } } .confetti { position: absolute; width: 10px; height: 10px; background-color: #f00; opacity: 0; } button { background-color: #ff6b6b; color: white; border: none; padding: 12px 25px; border-radius: 50px; font-size: 1rem; cursor: pointer; margin-top: 20px; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4); } button:hover { background-color: #ff5252; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6); } </style> </head> <body> <div class="birthday-card"> <h1>生日快乐！</h1> <p>愿你的每一天都充满欢笑和幸福！</p> <div class="cake"> <div class="plate"></div> <div class="layer"></div> <div class="layer top"></div> <div class="candle"></div> <div class="flame"></div> </div> <button id="celebrateBtn">点击庆祝！</button> </div> <script> // 创建气球 function createBalloons() { 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.transform = `scale(${Math.random() * 0.5 + 0.5})`; balloon.style.animationDuration = Math.random() * 5 + 5 + 's'; document.body.appendChild(balloon); } } // 创建彩色纸屑效果 function createConfetti() { const colors = ['#ff6b6b', '#4ecdc4', '#ffbe76', '#a55eea', '#f5f5f5']; for (let i = 0; i < 100; i++) { const confetti = document.createElement('div'); confetti.className = 'confetti'; confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; confetti.style.left = Math.random() * 100 + 'vw'; confetti.style.top = -10 + 'px'; confetti.style.transform = `rotate(${Math.random() * 360}deg)`; const size = Math.random() * 10 + 5; confetti.style.width = size + 'px'; confetti.style.height = size + 'px'; document.body.appendChild(confetti); animateConfetti(confetti); } } // 动画彩色纸屑 function animateConfetti(element) { const startX = parseFloat(element.style.left); const endX = startX + (Math.random() * 200 - 100); const duration = Math.random() * 3 + 2; element.style.opacity = '1'; const animation = element.animate([ { top: '-10px', left: startX + 'vw', opacity: 1 }, { top: '100vh', left: endX + 'vw', opacity: 0 } ], { duration: duration * 1000, easing: 'cubic-bezier(0.1, 0.8, 0.9, 1)' }); animation.onfinish = () => { element.remove(); }; } // 点击按钮触发庆祝效果 document.getElementById('celebrateBtn').addEventListener('click', function() { createConfetti(); // 按钮动画 this.animate([ { transform: 'scale(1)' }, { transform: 'scale(1.1)' }, { transform: 'scale(1)' } ], { duration: 300, iterations: 2 }); }); // 页面加载时创建气球 window.addEventListener('load', createBalloons); </script> </body> </html> ``` ## 代码特点 1. 渐变动画：使用CSS渐变并添加动画效果 2. 气球漂浮效果：随机生成彩色气球并添加漂浮动画 3. 蛋糕图形：纯CSS绘制的生日蛋糕，带有蜡烛和火焰动画 4. 彩色纸屑效果：点击按钮触发JavaScript生成的彩色纸屑动画 5. 卡片弹出动画：生日祝福卡片有缩放出现动画 ## 使用说明 1. 将代码复制到HTML文件中 2. 在浏览器中打开该文件 3. 点击"点击庆祝！"按钮触发彩色纸屑效果 ## 自定义建议 1. 修改文字内容为个性化祝福语 2. 调整颜色方案以匹配生日主题 3. 添加音乐或音效增强体验 4. 可以插入收件人的照片 ## 注意事项 1. 气球和纸屑使用绝对定位，确保父元素有正确的定位上下文 2. 动画性能在移动设备上可能需要优化 3. 渐变在旧版浏览器中可能不支持 [2025-03-28 21:16:24 | AI写代码神器 | 2410点数解答]