three实现三维「水陆空三栖」的高科技座驾体验代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由minimax-m3.1-flash ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维「水陆空三栖」的高科技座驾体验

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>AQUA ROVER X9 · 空海潜行战车</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:#05080d;
    font-family:"SF Mono",Consolas,"PingFang SC","Microsoft YaHei",monospace;
    color:#dff3ff;-webkit-user-select:none;user-select:none;touch-action:none}
  #c{display:block;width:100%;height:100%}

  /* ---------- HUD ---------- */
  #hud{position:fixed;inset:0;pointer-events:none;z-index:10}
  .panel{position:absolute;background:linear-gradient(160deg,rgba(8,22,36,.62),rgba(8,22,36,.28));
    border:1px solid rgba(120,220,255,.22);border-radius:12px;backdrop-filter:blur(6px);
    box-shadow:0 0 22px rgba(0,180,255,.10) inset,0 6px 26px rgba(0,0,0,.35)}

  #tl{left:18px;top:18px;padding:12px 16px 13px;min-width:216px}
  #modeTag{display:inline-block;font-size:12px;letter-spacing:3px;padding:3px 9px;border-radius:5px;
    background:rgba(0,200,255,.13);border:1px solid rgba(0,220,255,.35);color:#7fe6ff}
  #modeName{font-size:27px;font-weight:700;letter-spacing:2px;margin-top:5px;line-height:1.1}
  #spdRow{display:flex;align-items:baseline;gap:7px;margin-top:9px}
  #spd{font-size:38px;font-weight:700;letter-spacing:1px;font-variant-numeric:tabular-nums;
    text-shadow:0 0 18px rgba(0,200,255,.55)}
  #spdU{font-size:12px;opacity:.65;letter-spacing:1px}
  #bar{height:5px;border-radius:3px;background:rgba(255,255,255,.10);margin-top:8px;overflow:hidden}
  #barIn{height:100%;width:0%;border-radius:3px;background:linear-gradient(90deg,#1ce0ff,#7affd0);
    box-shadow:0 0 10px #1ce0ff;transition:width .08s linear}
  #altRow{display:flex;justify-content:space-between;font-size:12px;margin-top:9px;opacity:.85;letter-spacing:1px}
  #alt{font-variant-numeric:tabular-nums;color:#ffe08a}

  #tr{right:18px;top:18px;padding:10px}
  #mm{display:block;width:158px;height:158px;border-radius:50%;
    box-shadow:0 0 0 1px rgba(120,220,255,.25) inset}
  #mmLabel{text-align:center;font-size:10px;letter-spacing:2px;opacity:.55;margin-top:5px}

  /* 指北针 */
  #nav{position:absolute;left:50%;top:16px;transform:translateX(-50%);text-align:center}
  #navArrow{width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
    border-bottom:22px solid #ffd66b;margin:0 auto;filter:drop-shadow(0 0 7px rgba(255,214,107,.85));
    transform-origin:50% 66%}
  #navTxt{font-size:11px;letter-spacing:1.5px;margin-top:3px;color:#ffd66b;text-shadow:0 0 8px rgba(255,214,107,.5)}
  #navDist{font-size:10px;opacity:.6;margin-top:1px}

  /* 任务 */
  #task{left:18px;top:auto;bottom:150px;padding:9px 13px;font-size:12px;letter-spacing:1px}
  #task b{color:#7fe6ff}
  #ringGrid{display:flex;gap:4px;margin-top:7px}
  .dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(140,220,255,.55);background:transparent}
  .dot.on{background:#7dffcf;box-shadow:0 0 8px #7dffcf;border-color:#7dffcf}
  #timer{margin-top:7px;font-size:17px;letter-spacing:2px;font-variant-numeric:tabular-nums;color:#fff}

  /* 操作说明 */
  #keys{left:18px;bottom:18px;padding:10px 13px;font-size:11.5px;line-height:1.75;letter-spacing:.5px;opacity:.92}
  #keys b{display:inline-block;min-width:58px;color:#7fe6ff;font-weight:600}
  #keys .k{color:#ffd66b}

  /* 提示 */
  #toast{position:absolute;left:50%;top:31%;transform:translateX(-50%);text-align:center;
    font-size:20px;letter-spacing:3px;opacity:0;transition:opacity .35s;
    text-shadow:0 0 20px rgba(0,190,255,.9)}
  #toast small{display:block;font-size:12px;letter-spacing:2px;opacity:.75;margin-top:7px}

  /* 按钮 */
  #btns{position:absolute;right:18px;bottom:18px;display:flex;gap:8px;pointer-events:auto}
  .btn{pointer-events:auto;cursor:pointer;padding:11px 14px;border-radius:10px;font-size:12px;letter-spacing:2px;
    background:rgba(10,30,46,.7);border:1px solid rgba(120,220,255,.3);color:#cfefff;
    transition:.18s;text-align:center;min-width:64px}
  .btn:hover{background:rgba(0,180,255,.24);border-color:#5fe4ff;box-shadow:0 0 18px rgba(0,190,255,.35);transform:translateY(-2px)}
  .btn small{display:block;font-size:9px;opacity:.55;letter-spacing:1px;margin-top:2px}
  .btn.on{background:rgba(0,190,255,.3);border-color:#7fe6ff;color:#fff}

  /* 水下滤镜 */
  #uw{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .45s;
    background:radial-gradient(ellipse at 50% 40%,rgba(10,90,130,.20),rgba(2,40,70,.80) 75%,rgba(0,20,40,.95));
    mix-blend-mode:multiply}
  #vig{position:fixed;inset:0;pointer-events:none;z-index:6;
    background:radial-gradient(ellipse at 50% 50%,transparent 52%,rgba(0,0,0,.42) 100%)}

  /* 开始 / 结算 */
  #cover{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:radial-gradient(ellipse at 50% 40%,#0d2a44,#04070d 75%);transition:opacity .5s;text-align:center;padding:20px}
  #cover.hide{opacity:0;pointer-events:none}
  #cover h1{font-size:min(8.2vw,54px);letter-spacing:7px;font-weight:800;
    background:linear-gradient(180deg,#eafcff,#37c9ff 60%,#0e7fbf);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 0 24px rgba(60,200,255,.45))}
  #cover h2{font-size:13px;letter-spacing:7px;opacity:.6;margin-top:10px;font-weight:400}
  #card{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:640px;width:100%}
  .cdi{border:1px solid rgba(120,220,255,.22);border-radius:12px;padding:14px 10px;background:rgba(10,32,52,.5)}
  .cdi i{font-style:normal;font-size:24px}
  .cdi h3{font-size:13px;letter-spacing:2px;margin-top:5px;color:#7fe6ff}
  .cdi p{font-size:10.5px;opacity:.62;margin-top:6px;line-height:1.6}
  #go{margin-top:30px;cursor:pointer;padding:15px 46px;font-size:15px;letter-spacing:5px;border-radius:40px;
    color:#03131c;font-weight:700;border:none;opacity:.55;
    background:linear-gradient(90deg,#5ff0ff,#7affc8);box-shadow:0 0 34px rgba(70,230,255,.5);transition:.2s}
  #go:hover{transform:scale(1.06);box-shadow:0 0 48px rgba(70,230,255,.75)}
  #tip{margin-top:16px;font-size:11px;opacity:.45;letter-spacing:1px}
  #res{margin-top:18px;display:none;font-size:14px;letter-spacing:2px;line-height:2.1}
  #res b{color:#7dffcf}
  @media(max-width:760px){
    #keys{display:none}#task{bottom:96px}#mm{width:112px;height:112px}
    #tl{min-width:170px;padding:9px 12px}#spd{font-size:30px}#modeName{font-size:21px}
  }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="uw"></div>
<div id="vig"></div>

<div id="hud">
  <div class="panel" id="tl">
    <div id="modeTag">MODE</div>
    <div id="modeName">陆 行</div>
    <div id="spdRow"><div id="sp.........完整代码请登录后点击上方下载按钮下载查看