three实现三维盗墓破解机关游戏代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维骑马体验代码

下面为部分代码预览，完整代码请点击下载或在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 href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;900&display=swap" rel="stylesheet">
<style>
:root{
  --gold:#d8b46a; --gold-hi:#f4d99a; --bronze:#8c6a3f; --jade:#46e0a0;
  --cinnabar:#d84a30; --ink:#ded7c6; --dim:#8b8677; --bg:#05070a;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);
  font-family:"Noto Serif SC","STKaiti","KaiTi",serif;color:var(--ink)}
#app{position:fixed;inset:0}
#app canvas{display:block}

#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at 50% 48%, transparent 52%, rgba(0,0,0,.62) 100%)}
#flashRed{position:fixed;inset:0;pointer-events:none;z-index:6;opacity:0;transition:opacity .12s;
  background:radial-gradient(ellipse at center, rgba(216,58,32,.28), rgba(120,10,0,.5))}

.panel{position:fixed;z-index:10;background:rgba(8,11,10,.78);
  border:1px solid rgba(216,180,106,.38);box-shadow:0 0 0 1px rgba(0,0,0,.6), inset 0 0 24px rgba(0,0,0,.5);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  padding:14px 18px;backdrop-filter:blur(2px)}
.panel h3{font-size:11px;letter-spacing:.5em;color:var(--dim);font-weight:400;margin-bottom:10px}

#goals{top:18px;left:18px;width:270px}
#goals li{list-style:none;display:flex;gap:10px;align-items:baseline;
  font-size:14px;line-height:1.5;padding:5px 0;color:#b9b2a0;transition:color .4s}
#goals li i{font-style:normal;width:15px;height:15px;flex:none;transform:translateY(2px);
  border:1px solid rgba(216,180,106,.5);position:relative}
#goals li.done{color:var(--jade)}
#goals li.done i{border-color:var(--jade);box-shadow:0 0 8px rgba(70,224,160,.5)}
#goals li.done i::after{content:"";position:absolute;left:2px;top:2px;width:9px;height:9px;background:var(--jade)}

#stat{top:18px;right:18px;text-align:right;font-size:13px;letter-spacing:.2em;color:var(--dim)}
#stat b{display:block;font-size:26px;color:var(--gold);font-weight:600;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;margin-top:2px}

#cross{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;pointer-events:none}
#cross span{display:block;width:5px;height:5px;border-radius:50%;background:rgba(222,215,198,.75);
  box-shadow:0 0 6px rgba(0,0,0,.9);transition:all .15s}
#cross::before{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;
  transform:translate(-50%,-50%);border:1px solid transparent;border-radius:50%;transition:all .18s}
#cross.hot span{background:var(--gold-hi);box-shadow:0 0 10px var(--gold)}
#cross.hot::before{border-color:rgba(216,180,106,.65)}

#prompt{position:fixed;left:50%;bottom:12%;transform:translateX(-50%);z-index:10;display:none;
  font-size:17px;letter-spacing:.18em;color:var(--gold-hi);white-space:nowrap;
  background:rgba(8,10,9,.72);border:1px solid rgba(216,180,106,.35);padding:9px 22px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
#prompt b{color:var(--jade);font-weight:600}
#toast{position:fixed;left:50%;top:9%;transform:translateX(-50%) translateY(-8px);z-index:12;
  max-width:640px;text-align:center;font-size:16px;line-height:1.8;letter-spacing:.1em;color:var(--ink);
  background:rgba(10,12,10,.85);border-top:1px solid rgba(216,180,106,.5);border-bottom:1px solid rgba(216,180,106,.5);
  padding:12px 34px;opacity:0;transition:all .35s;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

#hint{left:50%;top:50%;transform:translate(-50%,-50%);width:460px;display:none;z-index:20}
#hint.show{display:block}
#hint h2{font-family:"Ma Shan Zheng";font-size:30px;color:var(--gold);font-weight:400;margin-bottom:12px;letter-spacing:.3em}
#hint p{font-size:14px;line-height:2;color:#c4bda9}
#hint p b{color:var(--gold-hi);font-weight:600;margin-right:.6em}
#hint .close{position:absolute;right:14px;top:10px;color:var(--dim);cursor:pointer;font-size:18px}

.overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;
  background:radial-gradient(ellipse at 62% 42%, rgba(5,7,10,.42), rgba(3,4,6,.93) 78%)}
.overlay::before{content:"";position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(circle at 20% 30%, rgba(70,224,160,.05), transparent 40%),
             radial-gradient(circle at 80% 70%, rgba(216,74,48,.06), transparent 45%);
  animation:fogdrift 14s ease-in-out infinite alternate}
@keyframes fogdrift{to{transform:translate(4%, -3%) scale(1.06)}}

#startBox{position:relative;display:flex;gap:56px;align-items:stretch;margin:0 auto;padding:0 6vw;max-width:1100px}
#intro{max-width:480px;align-self:center}
#intro .tag{font-size:12px;letter-spacing:.6em;color:var(--dim);margin-bottom:14px}
#intro .tag::.........完整代码请登录后点击上方下载按钮下载查看