three实仙三维有声仙侠国风网页游戏代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码由qwen-4 ai生成，可能有错误，仅供参考：点击查看提示词
代码描述：仙侠3d国风网游
下面为部分代码预览，完整代码请点击下载或在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,viewport-fit=cover">
<meta name="theme-color" content="#0a1a22">
<title>青锋 · 锁妖录</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600&display=swap" rel="stylesheet">
<style>
/* ============ 基础与防滚动 ============ */
:root{
  --paper:#f3ead8; --paper2:#e4d6ba; --ink:#10222b; --ink2:#1c3038;
  --jade:#7fe8c8; --jade2:#2e8f78; --gold:#f5c86a; --gold2:#b98a3a;
  --cinnabar:#c8371f; --blood:#ff3b4d; --purple:#a06bff;
  --brush:'Ma Shan Zheng','STKaiti','KaiTi','楷体',serif;
  --serif:'Noto Serif SC','STSong','SimSun',serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:none}
html{font-size:calc(9px + .55vmin)}
html,body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;background:#0a1a22;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;
  font-family:var(--serif);color:var(--paper)}
#stage{position:absolute;inset:0;z-index:0}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.layer{position:absolute;inset:0;pointer-events:none}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}

/* ============ 后期叠加：暗角 / 颗粒 / 色差 / 受击 / 狂暴 ============ */
#vignette{z-index:5;background:radial-gradient(ellipse at 50% 44%,transparent 50%,rgba(4,10,14,.62) 100%)}
#chroma{z-index:5;background:
  radial-gradient(ellipse at 47% 50%,transparent 62%,rgba(255,70,60,.06) 100%),
  radial-gradient(ellipse at 53% 50%,transparent 62%,rgba(70,130,255,.06) 100%)}
#grain{z-index:6;opacity:.055;mix-blend-mode:overlay;animation:grainJit .8s steps(3) infinite}
@keyframes grainJit{0%{transform:translate(0,0)}33%{transform:translate(-1.5%,1%)}66%{transform:translate(1%,-1.5%)}100%{transform:translate(0,0)}}
#hurtFx{z-index:7;opacity:0;background:radial-gradient(ellipse at center,transparent 38%,rgba(200,30,30,.6))}
#rageFx{z-index:7;opacity:0;transition:opacity 1s;background:radial-gradient(ellipse at center,transparent 42%,rgba(180,20,26,.42));animation:ragePulse 1.5s ease-in-out infinite}
@keyframes ragePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}

/* ============ 印章 / 宣纸通用 ============ */
.seal{pointer-events:auto;font-family:var(--brush);color:#f7ecd9;
  background:linear-gradient(160deg,#d8442e,#9c2413);
  border:.14rem solid rgba(247,236,217,.55);border-radius:.5rem;
  box-shadow:inset 0 0 .7rem rgba(60,8,4,.65),0 .25rem .9rem rgba(0,0,0,.5);
  text-shadow:0 0 .3rem rgba(60,8,4,.8)}
.seal:active{transform:scale(.94);filter:brightness(1.2)}
.seal-mini{font-family:var(--brush);color:#f7ecd9;background:linear-gradient(160deg,#d8442e,#9c2413);
  border:.1rem solid rgba(247,236,217,.5);border-radius:.35rem;
  box-shadow:inset 0 0 .4rem rgba(60,8,4,.6);display:grid;place-items:center}
.seal-mini.jade{background:linear-gradient(160deg,#3fae8c,#1d6b55)}
.seal-mini.gold{background:linear-gradient(160deg,#d9a94e,#96662a)}
.seal-mini.outline{background:rgba(16,34,43,.35);color:var(--paper);border-color:rgba(243,234,216,.5)}

/* ============ 竖排书法点缀 ============ */
.poem{position:absolute;top:13%;writing-mode:vertical-rl;font-family:var(--brush);
  color:rgba(243,234,216,.42);font-size:1.7rem;letter-spacing:.55em;z-index:8;pointer-events:none;
  text-shadow:0 0 .6rem rgba(10,20,26,.9)}
#poemR{right:calc(1.1rem + env(safe-area-inset-right))}
#poemL{left:calc(1.1rem + env(safe-area-inset-left));top:22%;color:rgba(127,232,200,.32)}
@media (max-width:700px){.poem{display:none}}

/* ============ 玩家面板 / 水墨血条 ============ */
#hud{position:absolute;z-index:10;left:calc(1rem + env(safe-area-inset-left));top:calc(1rem + env(safe-area-inset-top));pointer-events:none}
#plate{display:flex;align-items:flex-start;gap:.7rem}
#pname{width:3.4rem;height:3.4rem;font-size:1.5rem;writing-mode:vertical-rl;letter-spacing:.1em}
.bars{display:flex;flex-direction:column;gap:.45rem;padding-top:.2rem}
.bar{position:relative;height:1.45rem;width:34vmin;max-width:23rem;min-width:11rem;
  background:rgba(10,22,28,.72);border:.12rem solid rgba(243,234,216,.4);
  border-radius:.9rem .3rem .9rem .3rem;overflow:hidden;
  box-shadow:0 .15rem .6rem rgba(0,0,0,.45),inset 0 0 .5rem rgba(0,0,0,.5)}
.bar .fill{position:absolute;left:0;top:0;bottom:0;width:100%;transition:width .15s ease-out;
  background:linear-gradient(90deg,#e2543a,#a82313 70%,#7d150a)}
.bar.mp{height:1.05rem;width:27vmin;max-width:18rem}
.bar.mp .fill{background:linear-gradient(90deg,#8ff0d2,#2e8f78 70%,#1b5b49)}
.bar .brush{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
  background:repeating-linear-gradient(100deg,rgba(255,255,255,.12) 0 .25rem,transparent .25rem .65rem),
  linear-gradient(180deg,rgba(255,255,255,.22),transparent 45%)}
.bar .txt{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);font-size:.92rem;
  color:#f7ecd9;text-shadow:0 0 .3rem #000,0 0 .3rem #000;font-family:var(--serif)}
.bar.hp.low .fill{animation:hpPulse .7s ease-in-out infinite}
@keyframes hpPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.7)}}
#combo{margin-top:.7rem;font-family:var(--brush);font-size:2.1rem;color:var(--gold);
  text-shadow:0 0 .8rem rgba(245,200,106,.5),0 .1rem .2rem #000;opacity:0;transition:opacity .3s;transform-origin:left top}
#combo.pop{animation:comboPop .18s ease-out}
@keyframes comboPop{0%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ============ Boss 长血条 ============ */
#bossWrap{position:absolute;z-index:10;left:50%;transform:translateX(-50%) translateY(-140%);
  top:calc(.9rem + env(safe-area-inset-top));width:min(66vw,50rem);transition:transform .8s cubic-bezier(.2,.9,.3,1);pointer-events:none}
#bossWrap.show{transform:translateX(-50%) translateY(0)}
#bossName{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem;justify-content:center}
#bossName .seal-mini{width:2.4rem;height:2.4rem;font-size:1.15rem}
#bossTitle{font-family:var(--brush);font-size:1.7rem;color:var(--paper);letter-spacing:.25em;text-shadow:0 0 .7rem rgba(200,55,31,.8),0 .1rem .2rem #000}
#bossPhase{font-family:var(--brush);font-size:1.2rem;color:var(--blood);opacity:0;text-shadow:0 0 .6rem var(--blood);animation:ragePulse 1s infinite}
#bossPhase.on{opacity:1}
.bar.boss{width:100%;max-width:none;height:1.25rem;border-color:rgba(245,200,106,.55)}
.bar.boss .fill{background:linear-gradient(90deg,#ff5a3d,#b01f12 60%,#6e0f06)}
.bar.boss .notch{position:absolute;left:50%;top:-15%;bottom:-15%;width:.16rem;background:rgba(245,200,106,.9);box-shadow:0 0 .4rem var(--gold)}
@media (orientation:portrait){#bossWrap{top:calc(5.4rem + env(safe-area-inset-top));width:88vw}}

/* ============ 静音印章 ============ */
#muteBtn{position:absolute;z-index:50;right:calc(1rem + env(safe-area-inset-right));top:calc(1rem + env(safe-area-inset-top));
  width:3.4rem;height:3.4rem;font-size:1.6rem}
#muteBtn.off{filter:grayscale(.7) brightness(.75)}

/* ============ 技能按钮（朱印 + 宣纸圆钮） ============ */
#skills{position:absolute;z-index:20;right:calc(1.4rem + env(safe-area-inset-right));bottom:calc(1.4rem + env(safe-area-inset-bottom));
  width:14rem;height:14rem;pointer-events:none}
.skill{position:absolute;border-radius:50%;display:grid;place-items:center;pointer-events:auto;
  font-family:var(--brush);color:var(--ink2);
  background:radial-gradient(circle at 35% 28%,rgba(243,234,216,.96),rgba(206,188,156,.9));
  border:.16rem solid rgba(16,34,43,.6);
  box-shadow:inset 0 0 0 .28rem rgba(16,34,43,.08),inset 0 -.4rem .8rem rgba(120,90,40,.25),0 .3rem 1rem rgba(0,0,0,.5);
  transition:transform .08s,filter .15s}
.skill .glyph{font-size:2.2rem;line-height:1;text-shadow:0 0 .2rem rgba(255,255,255,.5)}
.skill.pressed{transform:scale(.9);filter:brightness(1.2)}
.skill .key{position:absolute;bottom:-1.5rem;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:.95rem;font-family:var(--serif);color:rgba(243,234,216,.8);text-shadow:0 0 .3rem #000}
body.touch .skill .key{display:none}
.skill .cd{position:absolute;inset:-.16rem;border-radius:50%;pointer-events:none;
  background:conic-gradient(rgba(8,16,22,.72) var(--p,0%),transparent 0)}
.skill .charge{position:absolute;inset:-.42rem;border-radius:50%;pointer-events:none;opacity:0;
  background:conic-gradient(var(--gold) var(--p,0%),rgba(245,200,106,.15) 0);
  -webkit-mask:radial-gradient(circle,transparent 61%,#000 63%);mask:radial-gradient(circle,transparent 61%,#000 63%)}
.skill.charging .charge{opacity:1}
.skill.nomana{filter:grayscale(.65) brightness(.65)}
.skill.deny{animation:denyShake .3s}
@keyframes denyShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-.4rem)}75%{transform:translateX(.4rem)}}
#sk-light{right:0;bottom:0;width:6.2rem;height:6.2rem}
#sk-light .glyph{font-size:2.8rem;color:var(--cinnabar)}
#sk-heavy{right:.5rem;bottom:7.4rem;width:5rem;height:5rem}
#sk-spell{right:7.4rem;bottom:.5rem;width:5rem;height:5rem}
#sk-spell .glyph{color:var(--jade2)}
#sk-dodge{right:7rem;bottom:6.9rem;width:4.6rem;height:4.6rem}
#sk-dodge .glyph{font-size:1.9rem}

/* ============ 虚拟摇杆 ============ */
#joy{position:absolute;z-index:19;width:9.4rem;height:9.4rem;border-radius:50%;display:none;pointer-events:none;
  border:.2rem solid rgba(243,234,216,.4);
  background:radial-gradient(circle,rgba(16,34,43,.2),rgba(16,34,43,.5));
  box-shadow:inset 0 0 1.5rem rgba(127,232,200,.15)}
#joyKnob{position:absolute;left:50%;top:50%;width:4.2rem;height:4.2rem;margin:-2.1rem 0 0 -2.1rem;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#c8f6e3,#4f9f86);
  border:.14rem solid rgba(16,34,43,.5);box-shadow:0 0 1.2rem rgba(127,232,200,.55)}

/* ============ 提示 / 横幅 / 飘字 ============ */
#hints{position:absolute;z-index:9;left:calc(1.2rem + env(safe-area-inset-left));bottom:calc(1.2rem + env(safe-area-inset-bottom));
  font-size:1rem;color:rgba(243,234,216,.65);letter-spacing:.12em;text-shadow:0 0 .4rem #000;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,22,28,.55),transparent);padding:.4rem .9rem;border-left:.2rem solid rgba(200,55,31,.7)}
body.touch #hints{display:none}
#banner{position:absolute;z-index:15;left:0;right:0;top:26%;text-align:center;font-family:var(--brush);
  font-size:4.2vmin;color:var(--gold);letter-spacing:.5em;opacity:0;pointer-events:none;
  text-shadow:0 0 1.2rem rgba(245,200,106,.6),0 .2rem .3rem #000}
#banner.play{animation:bannerIn 2.5s ease-out forwards}
@keyframes bannerIn{0%{opacity:0;letter-spacing:1.1em;filter:blur(8px)}18%{opacity:1;letter-spacing:.5em;filter:blur(0)}78%{opacity:1}100%{opacity:0;filter:blur(4px)}}
#toast{position:absolute;z-index:16;left:50%;top:17%;transform:translateX(-50%);font-family:var(--brush);
  font-size:1.7rem;color:var(--paper);background:rgba(16,34,43,.75);border:.1rem solid rgba(243,234,216,.4);
  border-radius:.4rem;padding:.5rem 1.4rem;opacity:0;transition:opacity .3s;pointer-events:none;letter-spacing:.2em}
#toast.show{opacity:1}
#nums{z-index:12}
.num{position:absolute;left:0;top:0;font-family:var(--brush);font-size:1.7rem;color:#fff;will-change:transform,opacity;
  text-shadow:0 0 .35rem #000,0 0 .35rem #000,0 .12rem .15rem #000;pointer-events:none;white-space:nowrap}
.num.crit{color:var(--gold);font-size:2.5rem;text-shadow:0 0 .6rem rgba(245,200,106,.9),0 .12rem .2rem #000}
.num.pdmg{color:var(--blood)}
.num.heal{color:var(--jade)}
.num.miss{color:var(--jade);font-size:1.3rem}

/* ============ 卷轴对话框 ============ */
#dialog{position:absolute;z-index:30;left:50%;transform:translateX(-50%);
  bottom:calc(15.5rem + env(safe-area-inset-bottom));width:min(92vw,46rem);display:none;pointer-events:auto}
#dialog.show{display:block;animation:dlgIn .35s ease-out}
@keyframes dlgIn{0%{opacity:0;transform:translateX(-50%) translateY(1.5rem)}100%{opacity:1;transform:translateX(-50%) translateY(0)}}
#dialog .paper{position:relative;min-height:5.6rem;padding:1.2rem 4.6rem 1.3rem 5.6rem;color:#26333a;
  background:linear-gradient(180deg,rgba(243,234,216,.97),rgba(226,211,182,.95));
  border-radius:.35rem;box-shadow:0 .6rem 2rem rgba(0,0,0,.55),inset 0 0 2.2rem rgba(120,90,40,.18)}
#dialog .paper::before,#dialog .paper::after{content:'';position:absolute;top:-.55rem;bottom:-.55rem;width:1.15rem;
  background:linear-gradient(90deg,#5d3f22,#a97c48 45%,#5d3f22);border-radius:.6rem;box-shadow:0 .2rem .6rem rgba(0,0,0,.5)}
#dialog .paper::before{left:-.6rem}
#dialog .paper::after{right:-.6rem}
#dlgWho{position:absolute;left:1.1rem;top:1.1rem;width:3.4rem;height:3.4rem;font-size:1.35rem;writing-mode:vertical-rl;letter-spacing:.05em}
#dlgText{font-size:1.45rem;line-height:1.75;font-family:var(--serif);min-height:2.6rem}
#dlgText .caret{display:inline-block;width:.55em;color:var(--cinnabar);animation:caretBlink .7s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}
#skipBtn{position:absolute;right:.9rem;top:.7rem;font-size:1rem;padding:.3rem .7rem;letter-spacing:.1em}
@media (max-height:520px){
  #dialog{bottom:calc(10.5rem + env(safe-area-inset-bottom));width:min(62vw,42rem)}
  #dlgText{font-size:1.25rem}
  #skills{transform:scale(.85);transform-origin:bottom right}
}

/* ============ 结算卷轴 ============ */
#result{position:absolute;inset:0;z-index:35;display:none;place-items:center;background:rgba(5,12,17,.55);pointer-events:auto}
#result.show{display:grid}
#result .scroll{position:relative;width:min(90vw,32rem);padding:3rem 2.4rem 2.6rem;text-align:center;color:#26333a;
  background:linear-gradient(180deg,#f3ead8,#e0cfab);border-radius:.4rem;
  box-shadow:0 1rem 3rem rgba(0,0,0,.7),inset 0 0 3rem rgba(120,90,40,.2);
  transform:scaleY(.05);opacity:0;transform-origin:top center;transition:transform .7s cubic-bezier(.2,.9,.25,1),opacity .4s}
#result.show .scroll{transform:scaleY(1);opacity:1}
#result .scroll::before,#result .scroll::after{content:'';position:absolute;left:-.8rem;right:-.8rem;height:1.3rem;
  background:linear-gradient(180deg,#a97c48,#5d3f22);border-radius:.7rem;box-shadow:0 .2rem .7rem rgba(0,0,0,.55)}
#result .scroll::before{top:-.65rem}
#result .scroll::after{bottom:-.65rem}
#resTitle{font-family:var(--brush);font-size:4rem;letter-spacing:.35em;color:var(--ink2);margin-bottom:.6rem}
#resTitle.lose{color:#7d150a}
#resRank{position:absolute;right:1.6rem;top:1.8rem;width:4.6rem;height:4.6rem;font-size:2.4rem;transform:rotate(8deg);
  display:grid;place-items:center;font-family:var(--brush)}
#resRank small{font-size:.9rem;display:block;line-height:1}
#resStats{margin:1.2rem auto 1.8rem;font-size:1.25rem;line-height:2.1;font-family:var(--serif);text-align:left;width:fit-content}
#resStats b{color:var(--cinnabar);font-weight:600;margin-left:.8em}
#restartBtn{font-size:1.7rem;padding:.8rem 2.6rem;letter-spacing:.3em}
#resHint{margin-top:.9rem;font-size:.95rem;color:rgba(38,51,58,.65)}

/* ============ 卷首（标题） ============ */
#title{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;pointer-events:auto;
  background:radial-gradient(ellipse at 50% 32%,rgba(10,26,34,.3),rgba(5,12,17,.82));transition:opacity .9s}
#title.hide{opacity:0;pointer-events:none}
#titleInner{text-align:center;position:relative;padding:2rem}
#titleSeal{position:absolute;right:-1rem;top:-1.5rem;width:4.4rem;height:4.4rem;font-size:1.7rem;transform:rotate(9deg);
  display:grid;place-items:center;writing-mode:vertical-rl;animation:sealFloat 4s ease-in-out infinite}
@keyframes sealFloat{0%,100%{transform:rotate(9deg) translateY(0)}50%{transform:rotate(7deg) translateY(-.5rem)}}
#title h1{font-family:var(--brush);font-size:10vmin;letter-spacing:.18em;line-height:1.2;
  background:linear-gradient(180deg,#fdf6e3 20%,#f5c86a 65%,#b98a3a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .2rem .3rem rgba(0,0,0,.8)) drop-shadow(0 0 1.5rem rgba(245,200,106,.25));
  animation:titleIn 1.4s ease-out}
@keyframes titleIn{0%{opacity:0;letter-spacing:.6em;filter:blur(10px)}100%{opacity:1;letter-spacing:.18em;filter:blur(0)}}
#subtitle{margin-top:1rem;font-size:1.5rem;letter-spacing:.7em;color:rgba(243,234,216,.8);text-indent:.7em}
#startHint{display:inline-block;margin-top:4.5vh;font-size:2.1rem;padding:1rem 3rem;letter-spacing:.4em;text-indent:.4em;
  animation:hintPulse 1.8s ease-in-out infinite;opacity:0;transition:opacity .6s}
#title.ready #startHint{opacity:1}
@keyframes hintPulse{0%,100%{box-shadow:inset 0 0 .7rem rgba(60,8,4,.65),0 0 .8rem rgba(216,68,46,.4)}50%{box-shadow:inset 0 0 .7rem rgba(60,8,4,.65),0 0 2.2rem rgba(216,68,46,.9)}}
#loadTxt{margin-top:1.6rem;font-size:1.15rem;color:rgba(127,232,200,.85);letter-spacing:.3em;animation:caretBlink 1.2s steps(1) infinite}
#title.ready #loadTxt{display:none}
#ctrlHint{margin-top:1.4rem;font-size:1rem;color:rgba(243,234,216,.55);letter-spacing:.15em}
@media (max-height:520px){#title h1{font-size:9vmin}#startHint{margin-top:2.5vh;font-size:1.7rem;padding:.7rem 2.2rem}}
</style>
</head>
<body>
<noscript><div style="position:absolute;inset:0;display:grid;place-items.........完整代码请登录后点击上方下载按钮下载查看