超简单！用HTML代码打造带动画效果的生日祝福页面

# 生日祝福HTML页面代码以下是一个简单的生日祝福HTML页面代码，包含基本的样式和动画效果： ```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 { font-family: 'Arial', sans-serif; background-color: #ffebee; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; overflow: hidden; } .card { background-color: white; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); padding: 30px; text-align: center; max-width: 500px; position: relative; transform: scale(0.9); animation: scaleUp 0.5s forwards; } h1 { color: #e91e63; margin-bottom: 20px; } p { color: #333; font-size: 18px; line-height: 1.6; } .cake { font-size: 50px; margin: 20px 0; animation: bounce 2s infinite; } .balloon { position: absolute; width: 40px; height: 60px; background-color: #e91e63; border-radius: 50%; opacity: 0.7; } @keyframes scaleUp { to { transform: scale(1); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } </style> </head> <body> <div class="card"> <h1>生日快乐！</h1> <div class="cake">🎂</div> <p>愿你的生日充满欢乐和惊喜！</p> <p>祝你心想事成，幸福安康！</p> </div> <script> // 创建气球元素 function createBalloons() { const colors = ['#e91e63', '#2196f3', '#4caf50', '#ffeb3b', '#9c27b0']; for (let i = 0; i < 10; i++) { const balloon = document.createElement('div'); balloon.className = 'balloon'; balloon.style.left = Math.random() * 100 + 'vw'; balloon.style.top = '100vh'; balloon.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; balloon.style.transform = `scale(${Math.random() * 0.5 + 0.5})`; document.body.appendChild(balloon); animateBalloon(balloon); } } // 气球动画 function animateBalloon(balloon) { const duration = Math.random() * 5 + 5; const delay = Math.random() * 5; balloon.style.animation = `float ${duration}s linear ${delay}s infinite`; // 添加CSS动画 const style = document.createElement('style'); style.innerHTML = ` @keyframes float { to { top: -100px; opacity: 0; } } `; document.head.appendChild(style); } // 页面加载后创建气球 window.onload = createBalloons; </script> </body> </html> ``` ## 代码说明 1. 这个HTML页面包含一个生日卡片，有动画效果和漂浮的气球 2. 使用了CSS动画使蛋糕图标上下跳动 3. JavaScript动态创建彩色气球并设置动画效果 4. 响应式设计，适合在不同设备上查看 ## 自定义建议 1. 可以修改`<h1>`和`<p>`标签中的文字内容为个性化祝福语 2. 调整CSS中的颜色值来改变整体配色方案 3. 添加更多装饰元素或图片使页面更加丰富 ## 注意事项 1. 气球动画使用了动态创建的CSS关键帧，这可能会影响性能 2. 气球元素创建后没有清理机制，长时间运行可能导致内存增加 3. 动画效果在某些旧版本浏览器上可能不兼容 ######[AI写代码神器 | 1000点数解答 | 2025-06-17 20:25:48]

服务商

更多选项

快捷项

自定义