# 酷炫生日祝福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; color: white; text-shadow: 0 0 5px rgba(0,0,0,0.3); } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } h1 { font-size: 3rem; margin-bottom: 20px; animation: pulse 1.5s infinite; text-align: center; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .cake { width: 200px; height: 150px; position: relative; margin: 30px 0; } .plate { width: 240px; height: 30px; background: #f5f5f5; border-radius: 50%; position: absolute; bottom: -15px; left: -20px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .layer { width: 200px; height: 50px; background: #ff6b6b; border-radius: 10px; position: absolute; bottom: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .layer.top { height: 40px; background: #ff8787; bottom: 65px; } .candle { width: 10px; height: 40px; background: #fff; position: absolute; bottom: 105px; left: 95px; border-radius: 5px; box-shadow: 0 0 10px rgba(255,255,255,0.8); } .flame { width: 15px; height: 30px; background: #ffde59; border-radius: 50% 50% 20% 20%; position: absolute; bottom: 145px; left: 92.5px; animation: flicker 0.5s infinite alternate; box-shadow: 0 0 20px #ffde59, 0 0 40px #ffde59; } @keyframes flicker { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1); opacity: 0.8; } } .confetti { position: absolute; width: 10px; height: 10px; background-color: #f00; opacity: 0; } .message { font-size: 1.5rem; text-align: center; max-width: 80%; margin-top: 20px; animation: slideIn 1s ease-out; } @keyframes slideIn { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .btn { margin-top: 30px; padding: 10px 20px; background: white; color: #ff6b6b; border: none; border-radius: 30px; font-size: 1rem; cursor: pointer; transition: all 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .btn:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); } </style> </head> <body> <h1>生日快乐！</h1> <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> <p class="message">愿你的每一天都像今天一样充满欢乐和惊喜！</p> <button class="btn" id="celebrateBtn">点击庆祝</button> <script> document.getElementById('celebrateBtn').addEventListener('click', function() { // 创建彩色纸屑效果 for (let i = 0; i < 100; i++) { createConfetti(); } // 播放生日歌 playBirthdaySong(); // 禁用按钮 this.disabled = true; this.textContent = '庆祝中...'; }); function createConfetti() { const confetti = document.createElement('div'); confetti.className = 'confetti'; // 随机颜色 const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; const randomColor = colors[Math.floor(Math.random() * colors.length)]; confetti.style.backgroundColor = randomColor; // 随机形状 const shapes = ['circle', 'square', 'triangle']; const randomShape = shapes[Math.floor(Math.random() * shapes.length)]; if (randomShape === 'circle') { confetti.style.borderRadius = '50%'; } else if (randomShape === 'triangle') { confetti.style.width = '0'; confetti.style.height = '0'; confetti.style.borderLeft = '5px solid transparent'; confetti.style.borderRight = '5px solid transparent'; confetti.style.borderBottom = `10px solid ${randomColor}`; confetti.style.backgroundColor = 'transparent'; } // 随机位置 confetti.style.left = Math.random() * 100 + 'vw'; confetti.style.top = -10 + 'px'; document.body.appendChild(confetti); // 动画 const animationDuration = Math.random() * 3 + 2; confetti.style.transition = `all ${animationDuration}s linear`; confetti.style.opacity = '1'; setTimeout(() => { confetti.style.top = '100vh'; confetti.style.transform = `rotate(${Math.random() * 360}deg) translateX(${Math.random() * 200 - 100}px)`; confetti.style.opacity = '0'; }, 10); // 移除元素 setTimeout(() => { confetti.remove(); }, animationDuration * 1000); } function playBirthdaySong() { // 简单的生日歌音频 const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); const tempo = 120; // BPM const noteLength = 60 / tempo; const notes = [ { note: 'C4', duration: noteLength }, { note: 'C4', duration: noteLength/2 }, { note: 'D4', duration: noteLength }, { note: 'C4', duration: noteLength }, { note: 'F4', duration: noteLength }, { note: 'E4', duration: noteLength * 2 }, { note: 'C4', duration: noteLength }, { note: 'C4', duration: noteLength/2 }, { note: 'D4', duration: noteLength }, { note: 'C4', duration: noteLength }, { note: 'G4', duration: noteLength }, { note: 'F4', duration: noteLength * 2 }, { note: 'C4', duration: noteLength }, { note: 'C4', duration: noteLength/2 }, { note: 'C5', duration: noteLength }, { note: 'A4', duration: noteLength }, { note: 'F4', duration: noteLength }, { note: 'E4', duration: noteLength }, { note: 'D4', duration: noteLength * 2 }, { note: 'Bb4', duration: noteLength }, { note: 'Bb4', duration: noteLength/2 }, { note: 'A4', duration: noteLength }, { note: 'F4', duration: noteLength }, { note: 'G4', duration: noteLength }, { note: 'F4', duration: noteLength * 2 } ]; const noteFreq = { 'C4': 261.63, 'D4': 293.66, 'E4': 329.63, 'F4': 349.23, 'G4': 392.00, 'A4': 440.00, 'Bb4': 466.16, 'C5': 523.25 }; let time = audioCtx.currentTime; notes.forEach(noteObj => { const oscillator = audioCtx.createOscillator(); const gainNode = audioCtx.createGain(); oscillator.type = 'triangle'; oscillator.frequency.value = noteFreq[noteObj.note]; oscillator.connect(gainNode); gainNode.connect(audioCtx.destination); oscillator.start(time); gainNode.gain.exponentialRampToValueAtTime(1, time + 0.001); gainNode.gain.exponentialRampToValueAtTime(0.001, time + noteObj.duration * 0.9); oscillator.stop(time + noteObj.duration); time += noteObj.duration; }); } </script> </body> </html> ``` ## 代码功能说明 1. 动态渐变使用CSS渐变和动画创建流动的效果 2. 生日蛋糕动画：包含蛋糕层、蜡烛和跳动的火焰 3. 点击庆祝按钮会触发： - 彩色纸屑动画效果（随机形状、颜色和位置） - 播放简单的生日歌旋律 4. 响应式设计：适配不同屏幕尺寸 ## 使用说明 1. 将代码复制到HTML文件中 2. 在浏览器中打开该文件 3. 点击"点击庆祝"按钮触发特效和音乐 ## 自定义建议 1. 修改`<h1>`标签中的文字内容可以更改祝福语 2. 调整CSS中的颜色值可以改变整体配色方案 3. 修改JavaScript中的`createConfetti()`函数可以调整纸屑的数量和效果 ## 注意事项 1. 某些浏览器可能需要用户交互后才能播放音频 2. 纸屑效果会消耗一定性能，在低端设备上可能会卡顿 3. 生日歌是简单的合成音效，不是真实录音 [2025-05-02 11:27:46 | AI写代码神器 | 2627点数解答]