粉色梦幻！HTML 打造带蛋糕、动态烟花与发光祝福的生日盛宴

以下是一个简单的 HTML 生日祝福页面示例，包含了您要求的元素： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生日祝福</title> <style> body { background-color: pink; } /* 蛋糕样式 */ .cake { width: 200px; height: 200px; background-color: #FFD700; border-radius: 50%; position: relative; } /* 蜡烛样式 */ .candle { width: 20px; height: 50px; background-color: #FF4500; position: absolute; top: -50px; left: 90px; } /* 火焰样式 */ .flame { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid red; animation: flicker 1s infinite; position: absolute; top: -20px; left: 85px; } @keyframes flicker { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } /* 烟花样式 */ .firework { width: 50px; height: 50px; background-color: #FFD700; border-radius: 50%; position: absolute; opacity: 0; animation: explode 1s ease-out infinite; } @keyframes explode { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } /* 发光的祝福语样式 */ .message { color: gold; font-size: 24px; text-shadow: 0 0 10px gold; } </style> </head> <body> <div class="cake"> <div class="candle"> <div class="flame"></div> </div> </div> <div class="firework"></div> <div class="firework"></div> <div class="firework"></div> <div class="message">生日快乐！</div> <script> // 生成随机位置的烟花 function generateFireworks() { const numFireworks = 10; for (let i = 0; i < numFireworks; i++) { const firework = document.createElement('div'); firework.className = 'firework'; firework.style.left = Math.random() * window.innerWidth + 'px'; firework.style.top = Math.random() * window.innerHeight + 'px'; document.body.appendChild(firework); } } generateFireworks(); </script> </body> </html> ``` 注意： 1. 此示例中的动画效果较为简单，您可能需要进一步优化以达到更理想的效果。 2. 对于复杂的动画和交互，可能需要使用 JavaScript 库或框架来实现。 3. 在实际应用中，确保图片和资源的版权合法。 ######[AI写代码神器 | 901点数解答 | 2025-03-16 08:21:56]

服务商

更多选项

快捷项

自定义