three实现本地视频转4D立方体可视化代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由qwen-3.8-max ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：视频转4D立方体可视化

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>时序立方 CHRONOCUBE · 视频 4D 分层可视化</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧊</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#070b12; --panel:#0d1424; --line:#1c2942; --line2:#2a3d63;
  --text:#d9e4f5; --dim:#7387a6; --amber:#f7b955; --amber2:#ffd28a;
  --cyan:#5fe3cf; --red:#ff6b6b;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --sans:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --disp:'Syne',var(--sans);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);
  display:grid;grid-template-rows:58px minmax(0,1fr) 130px;overflow:hidden}

/* ---------- header ---------- */
header{display:flex;align-items:center;justify-content:space-between;padding:0 18px;
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0d1526,#0a101d);z-index:10}
.brand{display:flex;align-items:center;gap:14px}
.cube{width:24px;height:24px;position:relative;transform-style:preserve-3d;animation:spin 7s linear infinite}
.cube i{position:absolute;inset:0;border:1.5px solid var(--amber);background:rgba(247,185,85,.08)}
.cube i:nth-child(1){transform:translateZ(12px)}
.cube i:nth-child(2){transform:rotateY(90deg) translateZ(12px)}
.cube i:nth-child(3){transform:rotateX(90deg) translateZ(12px)}
@keyframes spin{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}
.tt h1{font-family:var(--disp);font-size:19px;font-weight:800;letter-spacing:.14em;line-height:1}
.tt span{font:500 8.5px/1 var(--mono);color:var(--dim);letter-spacing:.26em}
.readouts{display:flex;gap:20px}
.ro{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.ro label{font:500 8.5px var(--mono);color:var(--dim);letter-spacing:.2em}
.ro b{font:600 12px var(--mono);color:var(--cyan)}
.ro:nth-child(odd) b{color:var(--amber2)}

/* ---------- layout ---------- */
main{display:grid;grid-template-columns:minmax(0,1fr) 318px;min-height:0}
#stage{position:relative;overflow:hidden;min-width:0;
  background:radial-gradient(1100px 650px at 72% 18%,#101b33 0%,transparent 60%),
             radial-gradient(900px 600px at 12% 88%,#0d1a2a 0%,transparent 55%),var(--bg)}
#stage::before{content:'';position:absolute;inset:-46px;z-index:0;
  background-image:linear-gradient(rgba(64,96,150,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(64,96,150,.07) 1px,transparent 1px);
  background-size:44px 44px;animation:gridpan 90s linear infinite}
@keyframes gridpan{to{transform:translate(44px,44px)}}
#stage canvas{position:absolute;inset:0;z-index:2;touch-action:none;cursor:grab}
#stage canvas:active{cursor:grabbing}
.scanlines{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}
.vignette{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 92% at 50% 45%,transparent 55%,rgba(3,5,10,.6) 100%)}

.hud{position:absolute;font:500 10px/1.8 var(--mono);color:var(--dim);letter-spacing:.08em;z-index:6;pointer-events:none}
#hudTL{top:14px;left:16px}
#hudTL b{color:var(--cyan);font-weight:600}
#hudBR{bottom:10px;right:16px;font-size:9.5px;opacity:.75}
#chip{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;
  font:500 10.........完整代码请登录后点击上方下载按钮下载查看