代码语言：html

所属分类：其他

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

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

代码标签： three 本地 视频 转 4D 立方体 可视化 代码

下面为部分代码预览，完整代码请点击下载或在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>时间立方体 · Temporal Cube — 视频 4D 堆叠展示</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=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+SC:wght@300;400;500&family=Space+Grotesk:wght@500;600&display=swap" rel="stylesheet">
<style>
  :root{
    --bg:#0b0c0f;
    --panel:rgba(17,19,24,.86);
    --line:rgba(255,255,255,.09);
    --txt:#dfe3e9;
    --dim:#8a93a3;
    --faint:#5c6472;
    --accent:#ffb454;
    --accent-dim:rgba(255,180,84,.35);
    --mono:'IBM Plex Mono',ui-monospace,monospace;
    --sans:'Noto Sans SC',sans-serif;
    --disp:'Space Grotesk','Noto Sans SC',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:var(--sans);}
  #stage{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab;}
  #stage:active{cursor:grabbing;}

  /* ── 左上标题 ─────────────────────────── */
  #brand{position:fixed;top:20px;left:22px;display:flex;gap:13px;align-items:center;z-index:15;pointer-events:none;}
  .brand-name{font:600 15px var(--disp);letter-spacing:.02em;}
  .brand-name span{font:10px var(--mono);color:var(--accent);letter-spacing:.24em;margin-left:9px;vertical-align:1px;}
  .brand-sub{font:10px var(--mono);color:var(--faint);letter-spacing:.14em;margin-top:4px;}

  /* ── 控制面板 ─────────────────────────── */
  #panel{position:fixed;top:18px;right:18px;width:266px;max-height:calc(100vh - 36px);overflow-y:auto;
    background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);padding:6px 16px 16px;z-index:20;transition:transform .3s ease;}
  #panel::-webkit-scrollbar{width:5px;}
  #panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);}
  .panel-head{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0 2px;
    border-bottom:1px solid var(--line);}
  .panel-head b{font:500 11px var(--mono);letter-spacing:.26em;color:var(--txt);font-weight:400;}
  .panel-head i{font:9px var(--mono);font-style:normal;color:var(--faint);letter-spacing:.15em;}
  #panel section{margin-top:6px;}
  #panel h3{display:flex;gap:9px;align-items:baseline;font:500 10px var(--mono);letter-spacing:.2em;
    color:var(--faint);margin:16px 0 10px;text-transform:uppercase;}
  #panel h3 b{color:var(--accent);font-weight:500;}
  .row{margin:11px 0;}
  .row.disabled{opacity:.32;pointer-events:none;}
  .row label{display:flex;justify-content:space-between;align-items:baseline;font:12px var(--sans);
    color:var(--dim);margin-bottom:5px;}
  .row label em{font:11px var(--mono);font-style:normal;color:var(--txt);}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:transparent;cursor:pointer;}
  input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(255,255,255,.14);}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-4.5px;
    background:var(--bg);border:1.5px solid var(--accent);border-radius:2px;transition:background .12s;}
  input[type=range]:hover::-webkit-slider-thumb,input[type=range]:active::-webkit-slider-thumb{background:var(--accent);}
  input[type=range]::-moz-range-track{height:2px;background:rgba(255,255,255,.14);}
  input[type=range]::-moz-range-thumb{width:9px;height:9px;background:var(--bg);border:1.5px solid var(--accent);border-radius:2px;}
  .seg{display:flex;gap:4px;}
  .seg button{flex:1;font:11px var(--mono);padding:6px 0;background:transparent;border:1px solid var(--line);
    color:var(--dim);cursor:pointer;transition:.12s;}
  .seg button:hover{color:var(--txt);}
  .seg button.on{border-color:var(--accent);color:var(--accent);background:rgba(255,180,84,.07);}
  .trow{display:flex;justify-content:space-between;align-items:center;font:12px var(--sans);color:var(--dim);
    margin:10px 0;cursor:pointer;user-select:none;}
  .trow:hover{color:var(--txt);}
  .tgl{width:30px;height:16px;border:1px solid var(--line);position:relative;flex:none;}
  .tgl i{position:absolute;top:2px;left:2px;width:10px;height:10px;background:var(--faint);transition:.16s;}
  .tgl.on{bord.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论