three实现三维末日城市流星雨驾车逃离游戏代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由qwen-3.8-max ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维末日城市流星雨驾车逃离游戏

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天穹 AEGIS-Ⅶ · 城市能量护盾</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800;900&family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<style>
:root{--cy:#5fe8ff;--cy2:#1899c9;--amber:#ffb454;--red:#ff4d5e;--ink:#04070d;--panel:rgba(5,14,24,.62);--line:rgba(95,232,255,.25)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#030509;color:var(--cy);font-family:'Rajdhani','Microsoft YaHei','PingFang SC',sans-serif}
canvas{display:block}
#loading{position:fixed;inset:0;background:#030509;z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .8s}
#loading .ring{width:74px;height:74px;border:2px solid rgba(95,232,255,.15);border-top-color:var(--cy);border-radius:50%;animation:spin 1s linear infinite}
#loading p{font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:.35em;color:#8fd8ea}
@keyframes spin{to{transform:rotate(360deg)}}
.lbox{position:fixed;left:0;right:0;height:44px;background:#000;z-index:20;pointer-events:none;transform:translateY(-100%);animation:lbin 1.4s .3s cubic-bezier(.2,.8,.2,1) forwards}
.lbox.top{top:0;border-bottom:1px solid rgba(95,232,255,.08)}
.lbox.bot{bottom:0;border-top:1px solid rgba(95,232,255,.08);transform:translateY(100%);animation-name:lbin2}
@keyframes lbin{to{transform:translateY(0)}}
@keyframes lbin2{from{transform:translateY(100%)}to{transform:translateY(0)}}
#titleCard{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:21;pointer-events:none;opacity:0;animation:card 6s .6s ease forwards;text-align:center}
#titleCard .en{font-family:'Orbitron';font-weight:600;font-size:clamp(11px,1.4vw,15px);letter-spacing:.85em;color:#79c9dd;margin-bottom:16px;text-indent:.85em}
#titleCard .cn{font-weight:700;font-size:clamp(34px,6.4vw,74px);letter-spacing:.32em;text-indent:.32em;color:#eafcff;text-shadow:0 0 34px rgba(95,232,255,.55)}
#titleCard .sub{margin-top:18px;font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:.5em;color:#5fa8bd;text-indent:.5em}
@keyframes card{0%{opacity:0;transform:scale(1.04)}12%{opacity:1;transform:scale(1)}78%{opacity:1}100%{opacity:0}}
#vignette{position:fixed;inset:0;z-index:14;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,transparent 52%,rgba(2,5,12,.62) 100%)}
#scanlines{position:fixed;inset:0;z-index:15;pointer-events:none;opacity:.5;background:repeating-linear-gradient(0deg,rgba(160,230,255,.022) 0 1px,transparent 1px 3px)}
#flash{position:fixed;inset:0;z-index:16;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 40%,rgba(255,120,80,.30),rgba(255,60,60,.12) 45%,transparent 75%);transition:opacity .5s ease-out}
#hud{position:fixed;inset:0;z-index:18;pointer-events:none}
.panel{background:var(--panel);border:1px solid var(--line);padding:14px 16px;position:absolute;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));opacity:0;animation:hudin .9s ease forwards}
@keyframes hudin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.label{font-family:'Orbitron';font-size:9px;font-weight:600;letter-spacing:.32em;color:#4d9db3}
.corner{position:fixed;width:26px;height:26px;z-index:19;border:1px solid rgba(95,232,255,.5);pointer-events:none}
.corner.tl{top:52px;left:14px;border-right:0;border-bottom:0}.corner.tr{top:52px;right:14px;border-left:0;border-bottom:0}
.corner.bl{bottom:52px;left:14px;border-right:0;border-top:0}.corner.br{bottom:52px;right:14px;border-left:0;border-top:0}
#pTitle{top:64px;left:28px;animation-delay:.5s;max-width:390px}
#pTitle .eyebrow{font-family:'Share Tech Mono';font-size:10px;letter-spacing:.3em;color:#54a5ba;margin-bottom:8px}
#pTitle h1{font-family:'Orbitron';font-weight:900;font-size:27px;color:#eafcff;letter-spacing:.06em;text-shadow:0 0 22px rgba(95,232,255,.5)}
#pTitle h1 span{color:var(--cy)}
#pTitle .sub{margin-top:7px;font-size:13px;font-weight:600;letter-spacing:.2em;color:#8fd8ea}
#pTitle .sub em{font-style:normal;color:var(--amber)}
#pStatus{top:64px;right:28px;width:284px;animation-delay:.7s}
.stat{margin-bottom:12px}.stat .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.stat .row b{font-family:'Orbitron';font-size:15px;font-weight:800;color:#eafcff}
.bar{height:9px;border:1px solid rgba(95,232,255,.35);background:rgba(0,20,30,.5);position:relative;overflow:hidden}
.bar i{position:absolute;inset:1px auto 1px 1px;width:80%;transition:width .25s;background:linear-gradient(90deg,#0f6f8f,var(--cy) 70%,#d8fbff)}
.bar::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(3,10,16,.7) 9px 10px)}
.bar.amber i{background:linear-gradient(90deg,#8a4d12,var(--amber) 70%,#ffe9c4)}
#pStatus.crit .b.........完整代码请登录后点击上方下载按钮下载查看