three实现三维古塔建筑生成动画代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由qwen-3.8-max 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">
<title>九层浮屠 · 古塔营造记</title>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600&display=swap" rel="stylesheet">
<style>
:root{
  --gold:#d8a54c; --gold-dim:rgba(216,165,76,.42); --paper:#f2e4c8;
  --ink:#171008; --cinnabar:#b03a2e;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%; overflow:hidden; background:#0d0a06;
  font-family:'Noto Serif SC',serif; color:var(--paper); user-select:none}
canvas{display:block}

/* ── 载入帷幔 ── */
#veil{position:fixed; inset:0; z-index:50; background:#0d0a06;
  display:grid; place-items:center; transition:opacity .9s ease}
#veil.hide{opacity:0; pointer-events:none}
#veil .box{text-align:center}
#veil .char{font-family:'Ma Shan Zheng'; font-size:110px; color:var(--gold);
  animation:pulse 1.6s ease-in-out infinite}
#veil .sub{margin-top:8px; font-size:13px; letter-spacing:.6em; color:rgba(242,228,200,.55)}
@keyframes pulse{0%,100%{opacity:.55; transform:scale(.97)}50%{opacity:1; transform:scale(1.03)}}

/* ── 竖排题额 ── */
#brand{position:fixed; top:26px; left:28px; z-index:10; display:flex; gap:14px; align-items:flex-start}
#brand .v-title{writing-mode:vertical-rl; font-family:'Ma Shan Zheng'; font-size:46px;
  letter-spacing:.26em; color:var(--paper); text-shadow:0 2px 14px rgba(0,0,0,.55)}
#brand .v-sub{writing-mode:vertical-rl; font-size:13px; letter-spacing:.55em;
  color:var(--gold); padding-top:6px; opacity:.9}
#brand .seal{writing-mode:vertical-rl; width:40px; padding:8px 0; text-align:center;
  background:var(--cinnabar); color:#f6e9d6; font-family:'Ma Shan Zheng'; font-size:17px;
  letter-spacing:.15em; border-radius:4px; transform:rotate(-2deg); margin-top:10px;
  box-shadow:0 4px 14px rgba(140,40,26,.45)}

/* ── 面板通用 ── */
.panel{background:linear-gradient(160deg, rgba(26,18,10,.82), rgba(14,10,6,.72));
  border:1px solid var(--gold-dim); border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(216,165,76,.10), 0 10px 30px rgba(0,0,0,.35)}

/* ── 工序面板 ── */
#stage{position:fixed; left:28px; bottom:30px; z-index:10; display:flex;
  gap:16px; align-items:center; padding:16px 22px}
#floorSeal{width:64px; height:64px; flex:none; background:var(--cinnabar); border-radius:5px;
  display:grid; place-items:center; font-family:'Ma Shan Zheng'; font-size:34px; color:#f7ecd8;
  box-shadow:0 4px 16px rgba(176,58,46,.4), inset 0 0 0 2px rgba(247,236,216,.25)}
#phaseName{font-family:'Ma Shan Zheng'; font-size:40px; line-height:1.05; color:var(--paper)}
#phaseDesc{margin-top:7px; font-size:12px; letter-spacing:.34em; color:rgba(242,228,200,.68)}
.swap{animation:riseIn .55s ease both}
@keyframes riseIn{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

/* ── 时间轴 ── */
#timeline{position:fixed; left:50%; bottom:34px; transform:translateX(-50%);
  width:min(58vw,760px); z-index:9}
#tl-bar{height:3px; background:rgba(216,165,76,.16); border-radius:2px}
#tl-fill{height:100%; width:0%; border-radius:2px;
  background:linear-gradient(90deg,#8a5a2a,var(--gold),#f2d491);
  box-shadow:0 0 10px rgba(240,190,100,.55)}
.mk{position:absolute; top:-3.5px; transform:translateX(-50%); text-align:center}
.mk i{display:block; width:9px; height:9px; border-radius:50%; background:#241a10;
  border:1px solid var(--gold-dim); transition:all .35s}
.mk.on i{background:var(--cinnabar); border-color:#e8c07a; box-shadow:0 0 9px rgba(232,140,80,.7)}
.mk span{position:absolute; top:13px; left:50%; transform:translateX(-50%);
  font-size:11px; color:rgba(242,228,200,.55); letter-spacing:.1em}

/* ── 控制 ── */
#ctrl{position:fixed; top:26px; right:26px; z-index:10; display:flex; flex-direction:column; gap:9px}
#ctrl button{padding:.........完整代码请登录后点击上方下载按钮下载查看