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.0">
<title>磁流实验室 · FERROFLUX LAB</title>
<link rel="preconnect" href="https://fonts.loli.net" crossorigin>
<link href="https://fonts.loli.net/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700&family=Chakra+Petch:wght@500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700&family=Chakra+Petch:wght@500;600;700&display=swap" rel="stylesheet">
<style>
  :root{
    --amber:#ffb454; --ember:#ff6a3d; --ice:#7fd7ff;
    --ink:#f2ede4; --dim:#8d93a1;
    --panel:rgba(10,11,14,.74); --line:rgba(255,180,84,.22);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden;background:#07080b}
  body{font-family:"Noto Sans SC",sans-serif;color:var(--ink);user-select:none;-webkit-user-select:none}
  body.playing, body.playing button{cursor:none}
  .num{font-family:"Chakra Petch","Noto Sans SC",monospace;font-variant-numeric:tabular-nums}
  .disp{font-family:"ZCOOL QingKe HuangYou","Noto Sans SC",sans-serif;font-weight:400}
  #c{position:fixed;inset:0;width:100%;height:100%;display:block}

  .panel{
    position:fixed;background:var(--panel);border:1px solid var(--line);
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
    padding:12px 16px;backdrop-filter:blur(5px);
    background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
    opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease;
  }
  body.ready .panel{opacity:1;transform:none}
  label{display:block;font-family:"Chakra Petch";font-size:10px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}

  #hud-top-left{top:18px;left:18px;transition-delay:.05s}
  #hud-top-left .zh{font-size:26px;letter-spacing:.14em;color:var(--ink)}
  #hud-top-left .zh b{color:var(--amber);font-weight:400}
  #hud-top-left .en{display:block;font-family:"Chakra Petch";font-size:9px;letter-spacing:.42em;color:var(--dim);margin-top:2px}
  .status{display:flex;gap:8px;align-items:center;margin-top:10px}
  .chip{font-size:11px;padding:3px 9px;border:1px solid var(--line);letter-spacing:.12em}
  .chip.n{color:var(--ember);border-color:rgba(255,106,61,.45)}
  .chip.s{color:var(--ice);border-color:rgba(127,215,255,.45)}
  #stField{font-family:"Chakra Petch";font-size:11px;color:var(--dim)}

  #hud-top-right{top:18px;right:18px;text-align:right;min-width:230px;transition-delay:.12s}
  #score{font-size:44px;line-height:1;color:var(--amber);text-shadow:0 0 24px rgba(255,180,84,.35)}
  .mini{display:flex;gap:22px;justify-content:flex-end;margin-top:8px}
  .mini .num{font-size:16px;color:var(--ink)}
  #time.low{color:var(--ember);animation:blink .6s steps(2) infinite}
  @keyframes blink{50%{opacity:.35}}
  #timebar{margin-top:9px;height:3px;background:rgba(255,255,255,.08)}
  #timefill{height:100%;width:100%;background:linear-gradient(90deg,var(--amber),var(--ember));transition:width .2s linear}
  #timefill.low{background:var(--ember)}

  #combo{position:fixed;top:14%;left:50%;transform:translateX(-50%);text-align:center;
    opacity:0;pointer-events:none;transition:opacity .25s}
  #combo.on{opacity:1}
  #combo.pop #comboX{animation:pop .3s ease}
  #comboX{font-family:"Chakra Petch";font-size:52px;font-weight:700;color:var(--amber);
    text-shadow:0 0 30px rgba(255,140,60,.5);display:block;line-height:1}
  #combo .lbl{font-size:10px;letter-spacing:.5em;color:var(--dim)}
  #comboBarWrap{width:120px;height:2px;background:rgba(255,255,255,.1);margin:7px auto 0}
  #comboBar{height:100%;background:var(--amber);width:100%}
  @keyframes pop{0%{transform:scale(1.7)}100%{transform:scale(1)}}

  #reson{position:fixed;top:26%;left:50%;transform:translateX(-50%);font-family:"Chakra Petch";
    font-size:13px;letter-spacing:.3em;color:var(--ice);text-shadow:0 0 18px rgba(127,215,255,.7);
    opacity:0;transition:opacity .2s;pointer-events:none;animation:blink 1s steps(2) infinite}
  #reson.on{opacity:1}

  #hud-bottom-left{bottom:18px;left:18px;font-size:12px;color:var(--dim);transition-delay:.2s}
  #hud-bottom-left div{margin:3px 0}
  kbd{font-family:"Chakra Petch";font-size:10px;color:var(--ink);border:1px solid.........完整代码请登录后点击上方下载按钮下载查看