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, viewport-fit=cover">
<meta name="theme-color" content="#04070d">
<title>花好月圆 · 中秋夜</title>
<style>
  :root{
    --ink:#eae3d1; --ink-dim:rgba(234,227,209,.55);
    --kai:'Ma Shan Zheng','STKaiti','KaiTi','BiauKai','DFKai-SB','楷体','Noto Serif SC',serif;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; height:100%; overflow:hidden; background:#04070d; }
  #c{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }

  #title{
    position:fixed; top:6vh; right:5vw; writing-mode:vertical-rl;
    color:var(--ink); pointer-events:none; user-select:none;
    font-family:var(--kai);
    text-shadow:0 0 22px rgba(240,228,196,.28);
    opacity:0; animation:fadeIn 2.4s ease .6s forwards; z-index:3;
  }
  #title h1{ margin:0; font-weight:400; font-size:clamp(30px,4.6vw,46px); letter-spacing:.35em; }
  #title p{ margin:16px 0 0; font-size:clamp(12px,1.4vw,15px); letter-spacing:.5em; color:var(--ink-dim); }

  #hint{
    position:fixed; left:50%; bottom:7vh; transform:translateX(-50%);
    display:flex; align-items:center; gap:16px; white-space:nowrap;
    color:var(--ink-dim); font-family:var(--kai);
    font-size:15px; letter-spacing:.45em; pointer-events:none; z-index:3;
    opacity:0; animation:fadeIn 2s ease 2.4s forwards;
  }
  #hint i{ display:block; width:52px; height:1px; background:linear-gradient(90deg,transparent,rgba(234,227,209,.4)); }
  #hint i:last-child{ transform:scaleX(-1); }
  #hint.gone{ animation:none; opacity:0; transition:opacity 1.2s ease; }

  #mute{
    position:fixed; right:22px; bottom:22px; width:40px; height:40px; border-radius:50%;
    border:1px solid rgba(234,227,209,.3); background:rgba(8,14,24,.35);
    color:var(--ink-dim); display:flex; align-items:center; justify-content:center;
    cursor:pointer; backdrop-filter:blur(4px); transition:color .3s,border-color .3s; z-index:5; padding:0;
  }
  #mute:hover{ color:var(--ink); border-color:rgba(234,227,209,.6); }
  #mute svg{ width:19px; height:19px; }

  #loader{
    position:fixed; inset:0; background:#04070d; z-index:9;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
    transition:opacity 1s ease;
  }
  #loader.done{ opacity:0; pointer-events:none; }
  #loader .m{
    width:54px; height:54px; border-radius:50%;
    background:radial-gradient(circle at 38% 35%, #fdf6e3, #e8d9b0 70%, #d9c69a);
    box-shadow:0 0 40px rgba(250,238,205,.35), 0 0 90px rgba(250,238,205,.15);
    animation:breathe 2.2s ease-in-out infinite;
  }
  #loader p{ margin:0; font-family:var(--kai); color:var(--ink-dim); font-size:13px; letter-spacing:.4em; }

  #fatal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:#04070d; z-index:10; }
  #fatal .card{ text-align:center; padding:44px 52px; border:1px solid rgba(234,227,209,.18); border-radius:14px; background:rgba(10,16,26,.6); max-width:82vw; }
  #fatal .m{
    width:44px; height:44px; margin:0 auto; border-radius:50%; opacity:.5;
    background:radial-gradient(circle at 38% 35%, #fdf6e3, #e8d9b0 70%, #d9c69a);
  }
  #fatal h2{ font-family:var(--kai); color:var(--ink); font-weight:400; letter-spacing:.3em; margin:20px 0 10px; font-size:22px; }
  #fatal p{ color:var(--ink-dim); font-size:13px; margin:0 0 24px; line-height:1.9; font-family:var(--kai); letter-spacing:.1em; }
  #fatal button{
    font-family:var(--kai); letter-spacing:.3em; padding:10px 36px; border-radius:999px;
    border:1px solid rgba(234,227,209,.4); background:transparent; color:var(--ink); cursor:pointer; font-size:14px;
  }
  #fatal button:hover{ border-color:rgba(234,227,209,.85); }

  @keyframes breathe{ 50%{ transform:scale(.92); opacity:.85; } }
  @keyframes fadeIn{ to{ opacity:1; } }
</style>
</head>
<body>
<canvas id="c.........完整代码请登录后点击上方下载按钮下载查看