代码语言：html

所属分类：其他

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

代码描述：三维蜘蛛侠游戏

代码标签： three 三维 蜘蛛侠 城市 穿梭 游戏 代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>蛛网穿梭 · WEB SWING</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bungee&family=Rajdhani:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@900&display=swap" rel="stylesheet">
<style>
  :root{
    --red:#e8323e; --gold:#ffb84d;
    --ink:rgba(10,9,14,.86); --line:rgba(255,255,255,.16);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:#0b0a12;
    font-family:'Rajdhani','Noto Sans SC',sans-serif;color:#f2efe9;user-select:none}
  canvas{position:fixed;inset:0;display:block}

  /* ---------- 通用面板 ---------- */
  .panel{background:var(--ink);border:1px solid var(--line);backdrop-filter:blur(8px);
    padding:34px 44px;position:relative}
  .panel::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--red)}
  .btn{display:inline-block;font-family:'Bungee','Rajdhani','Noto Sans SC',sans-serif;font-size:15px;
    letter-spacing:.14em;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);
    padding:13px 30px;cursor:pointer;transition:all .16s;text-transform:uppercase}
  .btn:hover{background:var(--red);border-color:var(--red);color:#fff}
  .btn.primary{background:var(--red);border-color:var(--red)}
  .btn.primary:hover{background:#c2222d}
  kbd{display:inline-block;font-family:'Rajdhani';font-weight:700;font-size:12px;color:#fff;
    border:1px solid rgba(255,255,255,.4);border-bottom-width:2px;border-radius:3px;
    padding:1px 7px;margin:0 2px;background:rgba(255,255,255,.06)}

  /* ---------- 错误横幅 ---------- */
  #fatal{position:fixed;top:0;left:0;right:0;z-index:99;display:none;
    background:#7a1420;color:#fff;font-size:13px;line-height:1.6;
    padding:10px 18px;border-bottom:1px solid rgba(255,255,255,.25)}
  #fatal b{display:block;font-family:'Bungee';font-size:11px;letter-spacing:.3em;margin-bottom:2px}

  /* ---------- 标题屏 ---------- */
  #title{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;padding:24px;
    background:radial-gradient(ellipse at 50% 42%,rgba(8,7,12,.22) 0%,rgba(8,7,12,.82) 100%);
    transition:opacity .7s;opacity:1}
  #title.off{opacity:0;pointer-events:none}
  #title .kicker{font-family:'Bungee';font-size:14px;letter-spacing:.55em;color:var(--red);
    margin-bottom:18px;text-indent:.55em}
  #title h1{font-family:'Noto Serif SC',serif;font-weight:900;font-size:clamp(46px,8vw,86px);
    letter-spacing:.16em;text-indent:.16em;line-height:1.05;color:#f7f4ee;
    text-shadow:0 4px 30px rgba(0,0,0,.6)}
  #title .sub{margin-top:14px;font-size:15px;letter-spacing:.28em;color:rgba(255,255,255,.62)}
  #title .desc{margin-top:26px;max-width:520px;font-size:15px;line-height:1.9;color:rgba(255,255,255,.72)}
  #title .keys{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
    font-size:13.5px;color:rgba(255,255,255,.78)}
  #title .keys span{display:flex;align-items:center;gap:6px}
  #title .btns{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
  #loadMsg{margin-top:36px;font-size:15px;letter-spacing:.2em;color:rgba(255,255,255,.6)}
  #loadMsg::after{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
    background:var(--red);margin-left:10px;vertical-align:1px;animation:pulse .9s infinite}
  #title .foot{position:absolute;bottom:22px;left:0;right:0;font-size:12px;
    letter-spacing:.2em;color:rgba(255,255,255,.38)}
  #mobileTip{display:none;margin-top:16px;font-size:13px;color:var(--gold);letter-spacing:.1em}
  @media (pointer:coarse){#mobileTip{display:block}}
  @keyframes pulse{50%{opacity:.45}}

  /* ---------- HUD ---------- */
  #hud{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity .6s}
  #hud.on{opacity:1}
  .hud-tl{position:absolute;top:22px;left:26px}
  .hud-tl .mode{font-size:12px;letter-spacing:.34em;color:rgba(255,255,255,.55)}
  #time{font-family:'Rajdhani';font-weight:700;font-size:52px;line-height:1;letter-spacing:.02em;
    color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
  #time.low{color:var(--red);animation:pulse .8s infinite}
  .hud-tr{position:absolute;top:22px;right:26px;text-align:right}
  .hud-tr .lbl{font-family:'Bungee';font-size:11px;letter-spacing:.4em;color:var(--red)}
  #score{font-family:'Rajdhani';font-weight:700;font-size:44px;line-height:1.05;color:#fff}
  #rings{font-size:14px;letter-spacing:.16em;color:rgba(255,255,255,.6)}
  .hud-br{position:absolute;bottom:24px;right:26px;text-align:right;font-size:14px;
    letter-spacing:.18em;color:rgba(255,255,255,.65)}
  .hud-br b{font-weight:700;color:#fff;font-size:19px;margin:0 3px}
  .hud-br div{margin-top:3px}
  #combo{position:absolute;top:16%;left:50%;transform:translateX(-50%);text-align:center;
    opacity:0;transition:opacity .25s}
  #combo.on{opacity:1}
  #comboN{font-family:'Bungee';font-size:44px;color:var(--red);display:block;line-height:1;
    text-shadow:0 0 22px rgba(232,50,62,.45)}
  #combo i{font-style:normal;font-size:13px;letter-spacing:.5em;color:rgba(255,255,255,.75);text-indent:.5em}
  #comboBar{width:120px;height:2px;background:rgba(255,255,255,.18);margin:8px auto 0}
  #comboBar i{display:block;height:100%;background:var(--red);width:100%}
  #hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:14px;
    letter-spacing:.12em;color:rgba(255,255,255,.85);background:var(--ink);
    border:1px solid var(--line);padding:10px 22.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论