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.0">
<title>RESONANCE · 三维音律曲谱</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=Cormorant+Garamond:wght@300;500&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<style>
  :root{
    --bg:#0a0a14;
    --fg:#e8e8f0;
    --muted:#7a7a8a;
    --accent:#00f5ff;
    --warm:#ff8855;
    --magenta:#ff3399;
    --border:rgba(0,245,255,0.22);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:'JetBrains Mono',monospace}
  #canvas-container{position:fixed;inset:0}
  .ui{position:fixed;inset:0;pointer-events:none;z-index:10}
  .ui>*{pointer-events:auto}

  .brand{position:absolute;top:40px;left:50px}
  .brand .title{
    font-family:'Cormorant Garamond',serif;font-weight:300;
    font-size:58px;letter-spacing:14px;line-height:1;
    background:linear-gradient(90deg,var(--fg) 0%,var(--accent) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .brand .subtitle{font-size:11px;letter-spacing:6px;color:var(--muted);margin-top:14px;padding-left:4px}
  .brand .accent-line{width:60px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);margin-top:14px}

  .info-panel{position:absolute;top:40px;right:50px;text-align:right;min-width:240px}
  .info-panel .label{font-size:10px;letter-spacing:4px;color:var(--muted);margin-bottom:8px}
  .info-panel .note-display{
    font-family:'Cormorant Garamond',serif;font-size:56px;font-weight:300;line-height:1;
    color:var(--accent);min-height:56px;
    text-shadow:0 0 24px rgba(0,245,255,0.5);
    transition:color 0.3s, text-shadow 0.3s;
  }
  .info-panel .note-display.warm{color:var(--warm);text-shadow:0 0 24px rgba(255,136,85,0.5)}
  .info-panel .progress-bar{margin-top:20px;height:2px;background:rgba(255,255,255,0.08);position:relative;overflow:hidden}
  .info-panel .progress-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--magenta));width:0%;transition:width 0.08s linear;box-shadow:0 0 12px var(--accent)}
  .info-panel .time-display{margin-top:10px;font-size:11px;color:var(--muted);letter-spacing:2px;font-variant-numeric:tabular-nums}
  .info-panel .time-display .current{color:var(--fg)}

  .controls{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);display:flex;gap:14px;align-items:center}
  .btn{
    background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--fg);
    padding:14px 32px;border-radius:40px;cursor:pointer;
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:4px;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    transition:all 0.3s;position:relative;overflow:hidden;
  }
  .btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 24px rgba(0,245,255,0.25)}
  .btn.primary{background:rgba(0,245,255,0.1);border-color:var(--accent);color:var(--accent)}
  .btn.primary:hover{background:rgba(0,245,255,0.2);box-shadow:0 0 32px rgba(0,245,255,0.5)}
  .btn:active{transform:scale(0.97)}

  .hint{position:absolute;bottom:50px;left:50px;font-size:10px;color:var(--muted);letter-spacing:3px;line-height:2.2}
  .hint .key{color:var(--accent);b.........完整代码请登录后点击上方下载按钮下载查看