死神VS火影：超燃动态UI打斗，特效拉满的史诗对决！

```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>死神VS火影 - 动态对战</title> <style> body { margin: 0; padding: 0; background: url('https://images.unsplash.com/photo-1543630797-33a35bcf7754?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center fixed; background-size: cover; font-family: 'Impact', sans-serif; color: #fff; overflow: hidden; } .arena { position: relative; width: 100vw; height: 100vh; display: flex; justify-content: space-around; align-items: center; padding: 20px; box-sizing: border-box; } .character { position: relative; text-align: center; z-index: 1; } .char-img { width: 180px; height: 260px; object-fit: cover; border: 4px solid #ffeb3b; border-radius: 12px; background: rgba(0,0,0,0.5); transition: transform 0.3s ease; } .name-tag { margin-top: 10px; font-size: 1.4em; text-shadow: 0 0 8px black; } .health-bar { width: 200px; height: 20px; background: #333; border-radius: 10px; overflow: hidden; margin-top: 5px; } .health-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff3e3e, #ff6b3e); transition: width 0.4s ease; } .vs-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3em; color: #ff4500; text-shadow: 0 0 20px yellow; opacity: 0; z-index: 0; white-space: nowrap; pointer-events: none; } .attack-effect { position: absolute; font-size: 2em; color: #ffcc00; text-shadow: 0 0 10px red; opacity: 0; pointer-events: none; animation: fly 1s forwards; } @keyframes fly { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(100vw); opacity: 0; } } .explosion { position: absolute; width: 100px; height: 100px; background: url('https://i.imgur.com/9Vv3BZP.gif'); background-size: contain; background-repeat: no-repeat; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; z-index: 10; } .controls { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; z-index: 100; } .skill-btn { padding: 12px 20px; font-size: 1em; background: rgba(255, 0, 0, 0.8); color: white; border: 2px solid #ffeb3b; border-radius: 8px; cursor: pointer; transition: all 0.3s; } .skill-btn:hover { background: rgba(255, 60, 0, 1); transform: scale(1.1); } #log { position: absolute; top: 20px; left: 20px; max-width: 400px; background: rgba(0,0,0,0.7); padding: 10px; border-radius: 8px; font-size: 1.1em; max-height: 150px; overflow-y: auto; } .floating-text { position: absolute; font-weight: bold; color: yellow; text-shadow: 0 0 5px red; pointer-events: none; animation: float-up 1.5s forwards; } @keyframes float-up { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-50px); opacity: 0; } } </style> </head> <body> <div class="arena">  <div class="character" id="player1"> <img src="https://i.imgur.com/8VQgzRa.png" alt="黑崎一护" class="char-img"> <div class="name-tag">黑崎一护</div> <div class="health-bar"> <div class="health-fill" id="hp1"></div> </div> </div>  <div class="vs-text" id="vsText">VS</div>  <div class="character" id="player2"> <img src="https://i.imgur.com/QrJ4v0A.png" alt="漩涡鸣人" class="char-img"> <div class="name-tag">漩涡鸣人</div> <div class="health-bar"> <div class="health-fill" id="hp2"></div> </div> </div>  <div class="explosion" id="explosion"></div>  <div id="log"></div> </div>  <div class="controls"> <button class="skill-btn" data-damage="15" data-name="普通斩击">普通斩击</button> <button class="skill-btn" data-damage="30" data-name="瞬步突刺">瞬步突刺</button> <button class="skill-btn" data-damage="50" data-name="卍解·天锁斩月">卍解·天锁斩月</button> <button class="skill-btn" data-damage="70" data-name="虚化爆发">虚化爆发</button> </div> <script> const hp1 = document.getElementById('hp1'); const hp2 = document.getElementById('hp2'); const log = document.getElementById('log'); const vsText = document.getElementById('vsText'); const explosion = document.getElementById('explosion'); let health1 = 100; let health2 = 100; // 显示 VS 动画 setTimeout(() => { vsText.style.opacity = 1; addFloatingText("战斗开始！", 'center'); }, 1000); function addToLog(text) { const entry = document.createElement('p'); entry.textContent = text; log.appendChild(entry); log.scrollTop = log.scrollHeight; } function addFloatingText(text, pos = 'left') { const el = document.createElement('div'); el.className = 'floating-text'; el.textContent = text; if (pos === 'center') { el.style.left = '50%'; el.style.top = '40%'; el.style.transform = 'translateX(-50%)'; } else if (pos === 'right') { el.style.right = '20%'; el.style.top = '30%'; } else { el.style.left = '20%'; el.style.top = '30%'; } document.body.appendChild(el); setTimeout(() => document.body.removeChild(el), 1600); } function playAttack(isPlayer1, skillName, damage) { const attacker = isPlayer1 ? "黑崎一护" : "漩涡鸣人"; const defender = isPlayer1 ? "漩涡鸣人" : "黑崎一护"; const side = isPlayer1 ? 'left' : 'right'; // 攻击动画 const effect = document.createElement('div'); effect.className = 'attack-effect'; effect.textContent = `⚡ ${skillName}`; effect.style[side] = '100px'; effect.style.top = '40%'; document.body.appendChild(effect); // 角色晃动 const defenderChar = isPlayer1 ? document.getElementById('player2') : document.getElementById('player1'); defenderChar.querySelector('.char-img').style.transform = 'scale(1.2) rotate(10deg)'; setTimeout(() => { defenderChar.querySelector('.char-img').style.transform = 'scale(1) rotate(0)'; }, 200); // 特效飞行动画 setTimeout(() => { effect.style[side] = 'calc(100% - 100px)'; }, 10); // 爆炸效果 setTimeout(() => { explosion.style.opacity = 1; explosion.style.display = 'block'; addFloatingText(`-${damage}`, 'center'); setTimeout(() => { explosion.style.opacity = 0; }, 500); }, 600); // 更新血量 setTimeout(() => { if (isPlayer1) { health2 -= damage; health2 = Math.max(0, health2); hp2.style.width = `${health2}%`; } else { health1 -= damage; health1 = Math.max(0, health1); hp1.style.width = `${health1}%`; } addToLog(`${attacker} 使用【${skillName}】造成 ${damage} 伤害！`); document.body.removeChild(effect); // 判断胜负 if (health1 <= 0) { endBattle("漩涡鸣人"); } else if (health2 <= 0) { endBattle("黑崎一护"); } }, 1000); } // 绑定技能按钮 document.querySelectorAll('.skill-btn').forEach(btn => { btn.addEventListener('click', () => { const damage = parseInt(btn.dataset.damage); const name = btn.dataset.name; const isPlayer1 = Math.random() > 0.5; // 随机决定谁攻击（可改为双人操作） playAttack(isPlayer1, name, damage); }); }); function endBattle(winner) { addToLog(`🎉 ${winner} 获胜！战斗结束。`); addFloatingText(`${winner} WIN!`, 'center'); setTimeout(() => alert(`${winner} 赢得了这场史诗对决！`), 1000); document.querySelectorAll('.skill-btn').forEach(b => b.disabled = true); } // 初始化日志 addToLog("欢迎进入死神VS火影动态对战！"); addToLog("点击技能按钮发动攻击，随机触发战斗特效！"); </script> </body> </html> ``` ✅ 功能亮点： - 动态 UI 打斗：每次使用技能都会触发： - ⚡ 技能文字从一侧飞向另一侧 - 💥 中央爆炸动画（GIF） - 🩸 角色受击抖动反馈 - 📉 血条实时减少动画 - ✨ 浮空伤害数字（如 `-50`） - 视觉特效丰富： - 动态图 + 半透明UI层 - 技能按钮悬停放大 - 战斗日志自动滚动 - “VS” 文字淡入动画 - 可扩展性强： - 可替换为本地图片或添加角色选择界面 - 支持加入音效（可后续用 `Audio()` 添加） - 可改为双人轮流点击模式 > 🔧 使用建议：将此 HTML 文件保存并在现代浏览器中打开（Chrome/Firefox），确保网络正常以加载图片和 GIF。你还可以进一步加入： - 必杀技全屏震动 - 查克拉/灵压槽 - 多角色切换系统 - 存档与胜负统计需要我帮你加上这些进阶功能吗？ ######[AI问答 | 2925点数解答 | 2025-10-17 20:07:58]

服务商

更多选项

快捷项

自定义