three做个三维九龙拉棺场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由glm-5.3-flash 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, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#04060b">
<title>九龍拉棺 · 引棺渡夜</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;900&display=swap" rel="stylesheet">
<style>
  :root{ --gold:#c9a45f; --ink:rgba(216,205,180,.55); }
  *{ box-sizing:border-box; }
  html,body{ margin:0; height:100%; background:#04060b; overflow:hidden;
    font-family:"Noto Serif SC","Songti SC","STSong",serif; }
  canvas{ display:block; }

  /* ── 加载遮罩 ── */
  #loader{ position:fixed; inset:0; z-index:50; background:#04060b;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
    transition:opacity 1.4s ease .2s; }
  #loader.done{ opacity:0; pointer-events:none; }
  .ld-title{ color:#e6d5a3; font-weight:900; font-size:clamp(30px,5vw,52px);
    letter-spacing:.55em; margin-left:.55em; text-shadow:0 0 30px rgba(201,164,95,.35);
    animation:breathe 3s ease-in-out infinite; }
  .ld-bar{ width:170px; height:1px; background:rgba(201,164,95,.18); overflow:hidden; }
  .ld-bar i{ display:block; width:42%; height:100%; background:var(--gold); animation:slide 1.6s ease-in-out infinite; }
  .ld-sub{ color:rgba(216,205,180,.4); font-size:12px; letter-spacing:.6em; margin-left:.6em; }
  @keyframes slide{ 0%{transform:translateX(-110%)} 100%{transform:translateX(280%)} }
  @keyframes breathe{ 0%,100%{opacity:.75} 50%{opacity:1} }

  /* ── 竖排标题 ── */
  #title{ position:fixed; top:7vh; right:5vw; z-index:10; writing-mode:vertical-rl;
    display:flex; gap:16px; align-items:flex-start; pointer-events:none;
    opacity:0; transition:opacity 1.8s ease .4s; }
  body.ready #title{ opacity:1; }
  #title h1{ margin:0; writing-mode:vertical-rl; color:#e6d5a3; font-weight:900;
    font-size:clamp(38px,5.4vw,72px); letter-spacing:.22em;
    text-shadow:0 0 26px rgba(201,164,95,.32); }
  #title .sub{ writing-mode:vertical-rl; color:var(--ink); font-size:13px;
    letter-spacing:.55em; padding-top:8px; }
  #title .line{ width:1px; height:96px; margin-top:6px;
    background:linear-gradient(to bottom, var(--gold), transparent); }

  /* ── 左下提示 ── */
  #hint{ position:fixed; left:4vw; bottom:5vh; z-index:10; color:rgba(216,205,180,.42);
    font-size:12px; letter-spacing:.28em; pointer-events:none;
    opacity:0; transition:opacity 1.8s ease .8s; }
  body.ready #hint{ opacity:1; }
  #hint b{ color:rgba(230,213,163,.75); font-weight:600; }

  /* ── 控制条 ── */
  #panel{ position:fixed; left:50%; bottom:4.5vh; transform:translateX(-50%); z-index:10;
    display:flex; align-items:center; gap:22px; padding:10px 22px;
    background:rgba(8,10,16,.55); border:1px solid rgba(201,164,95,.22); border-radius:2px;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    opacity:0; transition:opacity 1.8s ease 1s; }
  body.ready #panel{ opacity:1; }
  #panel button{ background:none; border:none; color:var(--gold); cursor:pointer;
    font-family:inherit; font-size:13px; letter-spacing:.3em; padding:4px 2px;
    border-bottom:1px solid transparent; transition:.25s; }
  #panel button:hover{ border-bottom-color:rgba(201,164,95,.6); }
  #panel .speed{ display:flex; align-items:center; gap:10px; color:var(--ink); font-size:12px; letter-spacing:.2em; }
  #panel input[type=range]{ -webkit-appearance:none; appearance:none; width:120px; height:1px;
    background:rgba(201,164,95,.35); outline:none; }
  #panel input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:11px; height:11px;
    border-radius:50%; background:var(--gold); cursor:pointer; box-shadow:0 0 8px rgba(201,164,95,.7); }
  #panel input[type=range]::-moz-range-thumb{ width:11px; height:11px; border:none; border-radius:50%;
    background:var(--gold); cursor:pointer; }
  #panel .val{ color:rgba(230,213,163,.7); width:28px; text-align:right; }

  /* ── 觉醒提示 ── */
  #toast{ position:fixed; left:50%; bottom:20vh; transform:translate(-50%,14px); z-index:20;
    color:#ffd28a; font-size:clamp(14px,1.6vw,18px); letter-spacing:.32em; text-align:center;
    text-shadow:0 0 18px rgba(255,110,50,.55), 0 0 3px rgba(0,0,0,.8);
    opacity:0; transition:opacity .7s ease, transform .7s ease; pointer-events:none; }
  #toast.on{ opacity:1; transform:translate(-50%,0); }

  @media (max-width:640px){
    #title{ top:4vh; right:6vw; } #title h1{ font-size:34px.........完整代码请登录后点击上方下载按钮下载查看