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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#070d18; --panel:rgba(9,15,28,.84); --line:rgba(126,164,255,.16);
  --tx:#e8edf7; --mut:#8593ad; --gold:#ffc94d; --cy:#4dd8ff; --up:#ff5a5f; --dn:#21ce99;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--tx);
  font-family:'Noto Sans SC',sans-serif;-webkit-font-smoothing:antialiased}
.disp{font-family:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;font-weight:400;letter-spacing:.04em}
.mono{font-family:'JetBrains Mono',monospace}
#stage{position:fixed;inset:0}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 42%,transparent 52%,rgba(2,5,11,.62) 100%)}
/* ---------- 角标装饰 ---------- */
.fc{position:fixed;width:22px;height:22px;z-index:5;pointer-events:none;opacity:.65}
.fc.tl{top:10px;left:10px;border-top:2px solid var(--gold);border-left:2px solid var(--gold)}
.fc.tr{top:10px;right:10px;border-top:2px solid var(--gold);border-right:2px solid var(--gold)}
.fc.bl{bottom:10px;left:10px;border-bottom:2px solid var(--gold);border-left:2px solid var(--gold)}
.fc.br{bottom:10px;right:10px;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold)}
/* ---------- 顶栏 ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:18px;
  padding:14px 26px 10px;background:linear-gradient(180deg,rgba(5,9,18,.9),rgba(5,9,18,0));pointer-events:none}
#brand .b-mark{font-size:26px;color:var(--gold);line-height:1;text-shadow:0 0 18px rgba(255,201,77,.35)}
#brand .b-sub{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.34em;color:var(--mut);margin-top:4px}
#tape{flex:1;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:5px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tape-track{display:flex;width:max-content;gap:34px;animation:tape 46s linear infinite}
@keyframes tape{to{transform:translateX(-50%)}}
.ti{display:flex;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12px;white-space:nowrap}
.ti b{font-weight:400;color:#c4cee2}
.ti .up{color:var(--up)} .ti .dn{color:var(--dn)}
#hint{font-size:11px;color:var(--mut);letter-spacing:.08em;white-space:nowrap}
/* ---------- 左侧章节导航 ---------- */
#nav{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:8px}
.nv{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;cursor:pointer;border:1px solid transparent;
  border-left:2px solid rgba(126,164,255,.18);background:rgba(8,13,25,.55);transition:.25s;pointer-events:auto}
.nv .num{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--mut)}
.nv .cn{font-size:14px;font-weight:500}
.nv .en{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;color:var(--mut)}
.nv:hover{transform:translateX(5px);border-left-color:var(--cy);background:rgba(14,24,44,.8)}
.nv.on{border-left-color:var(--gold);background:linear-gradient(90deg,rgba(255,201,77,.14),rgba(8,13,25,.7));}
.nv.on .cn{color:var(--gold)} .nv.on .num{color:var(--gold)}
/* ---------- 右侧讲解面板 ---------- */
#panel{position:fixed;right:18px;top:86px;width:352px;max-height:calc(100vh - 200px);z-index:10;
  background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(8px);
  padding:20px 22px 16px;overflow:auto;pointer-events:auto}
#panel::-webkit-scrollbar{width:4px} #panel::-webkit-scrollbar-thumb{background:#2a3c60}
#panel::before{content:'';position:absolute;top:-1px;left:-1px;width:26px;height:26px;
  border-top:2px solid var(--gold);border-left:2px solid var(--gold)}
.p-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
#pTag{font-size:10px;letter-spacing:.2em;color:var(--gold);border:1px solid rgba(255,201,77,.4);padding:3px 8px}
#pEn{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.24em;color:var(--mut)}
#pTitle{font-size:34px;line-height:1.1;margin-bottom:10px}
#pChips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.chip{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#bcd0f2;background:rgba(77,216,255,.08);
  border:1px solid rgba(77,216,255,.25);padding:3px 9px}
#stepText{font-size:13.5px;line-height:1.95;color:#d4dcec;min-height:130px;border-top:1px dashed var(--line);padding-top:12px}
#stepText b{color:var(--gold);font-weight:700}
#stepText .up{color:var(--up);font-weight:500} #stepText .dn{color:var(--dn);font-weight:500}
#stepText .cy{color:var(--cy)} #stepText .gold{color:var(--gold)}
.step-in{animation:stepIn .5s cubic-bezier(.2,.8,..........完整代码请登录后点击上方下载按钮下载查看