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"/>
<title>吉萨 · 永恒之门 — 三维金字塔探索</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Noto+Serif+SC:wght@400;600;900&display=swap" rel="stylesheet">
<style>
:root{
  --gold:#e0b054; --gold-hi:#ffd98a; --ink:#0b0a10; --sand:#e8d5a8;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#050409;
  font-family:"Noto Serif SC","Songti SC","SimSun",serif;color:var(--sand);
  -webkit-user-select:none;user-select:none}
.disp{font-family:"Cinzel","Noto Serif SC",serif}
canvas{display:block}
#app{position:fixed;inset:0}

/* ---------- 暗角 ---------- */
#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.42) 100%)}

/* ---------- 开始 / 暂停覆盖层 ---------- */
.overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,rgba(38,26,12,.55),rgba(5,4,9,.94) 75%);
  transition:opacity .7s ease}
.overlay.hidden{opacity:0;pointer-events:none}
.panel{max-width:860px;width:92%;padding:44px 54px 38px;text-align:center;position:relative;
  border:1px solid rgba(224,176,84,.45);outline:1px solid rgba(224,176,84,.18);outline-offset:7px;
  background:linear-gradient(180deg,rgba(20,14,8,.72),rgba(8,6,4,.86))}
.glyphrow{color:var(--gold);opacity:.75;letter-spacing:1.2em;font-size:13px;margin-bottom:14px;text-indent:1.2em}
.pyrmark{width:0;height:0;margin:0 auto 10px;border-left:30px solid transparent;border-right:30px solid transparent;
  border-bottom:46px solid rgba(224,176,84,.9);filter:drop-shadow(0 0 18px rgba(255,200,90,.55));
  animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{filter:drop-shadow(0 0 10px rgba(255,200,90,.3))}50%{filter:drop-shadow(0 0 26px rgba(255,210,110,.8))}}
h1{font-weight:900;font-size:clamp(34px,5.6vw,58px);letter-spacing:.18em;color:var(--gold-hi);
  text-shadow:0 0 30px rgba(255,190,80,.35)}
.sub{font-family:"Cinzel",serif;font-size:12px;letter-spacing:.55em;color:#b99b5e;margin:10px 0 22px;text-indent:.55em}
.rules{display:flex;gap:0;justify-content:center;flex-wrap:wrap;margin:6px 0 24px;font-size:14px;line-height:2.05;color:#d8c49a}
.rules span{padding:0 16px;border-right:1px solid rgba(224,176,84,.25)}
.rules span:last-child{border-right:none}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 22px;
  font-size:13px;color:#c9b489;text-align:left;margin:0 auto 26px;max-width:640px}
.keys b{color:var(--gold-hi);font-weight:600}
kbd{display:inline-block;min-width:24px;text-align:center;padding:1px 7px;margin-right:6px;font-family:"Cinzel",serif;
  font-size:11px;color:#ffe9b8;border:1px solid rgba(224,176,84,.55);border-radius:3px;background:rgba(224,176,84,.08)}
.bigbtn{cursor:pointer;font-family:"Cinzel","Noto Serif SC",serif;font-weight:700;font-size:19px;letter-spacing:.35em;
  color:var(--gold-hi);background:linear-gradient(180deg,rgba(224,176,84,.20),rgba(224,176,84,.06));
  border:1px solid var(--gold);padding:15px 56px 15px calc(56px + .35em);transition:.25s}
.bigbtn:hover{background:var(--gold);color:#181008;box-shadow:0 0 34px rgba(240,190,90,.5)}
.tiny{margin-top:18px;font-size:12px;color:#8d7b57;letter-spacing:.12em}
.btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0 6px}
.sbtn{cursor:pointer;font-size:13px;letter-spacing:.15em;color:var(--sand);background:transparent;
  border:1px solid rgba(224,176,84,.5);padding:8px 18px;transition:.2s;font-family:inherit}
.sbtn:hover,.sbtn.on{background:rgba(224,176,84,.9);color:#181008}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;display:none}
#hud.show{display:block}
#tl{position:absolute;top:18px;left:22px;font-size:13px;line-height:1.9;letter-spacing:.1em;
  color:#e6d3a3;text-shadow:0 1px 4px rgba(0,0,0,.8)}
#tl .big{font-family:"Cinzel",serif;font-size:26px;font-weight:700;color:var(--gold-hi);letter-spacing:.12em}
#tl .zone{color:#fff3d0;font-size:15px}
#tl .dim{color:#a08c5f;font-size:12px}
#tr{position:absolute;top:18px;right:22px;text-align:right;font-size:12px;line-height:2.1;color:#b7a071;letter-spacing:.08em;
  text-shadow:0 1px 4px rgba(0,0,0,.8)}
#tr b{color:#f0dc9f;font-weight:600}
#crosshair{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:rgba(255,235,190,.9);box-shadow:0 0 6px rgba(255,220,150,.9)}
#hint{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);max-width:78%;text-align:center;
  font-size:17px;letter-spacing:.22em;color:#ffe9b8;text-shadow:0 2px 12px rgba(0,0,0,.9);
  opacity:0;transition:opacity .8s ease}
#hint.show{opacity:1}
#compass{position:absolute;left:50%;top:16px;transform:translateX(-50%);width:320px;height:30px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
#cstrip{position:absolute;top:0;height:100%;white-space:nowrap}
#cstrip span{position:absolute;top:2px;transform:translateX(-50%);font-size:12px;letter-spacing:.1em;color:#cbb582}
#cstrip span.card{color:#ffe4a6;font-weight:600;font-size:13px.........完整代码请登录后点击上方下载按钮下载查看