代码语言：html

所属分类：其他

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

代码描述：three实现三维九层古塔建筑修建生成过程动画代码

代码标签： three 三维 九层 古塔 建筑 修建 生成 过程 动画 代码

下面为部分代码预览，完整代码请点击下载或在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">
<title>九层浮屠 · 古塔营造动画</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=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;700;900&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#10151b;--ink2:#19212a;--ink3:#232e38;
  --paper:#f1e6cd;--paper2:#cdbb96;--paper3:#8e8168;
  --verm:#c1442e;--verm2:#e2603f;--gold:#d8a743;--gold2:#f3cd7c;
  --tile:#344550;--jade:#4a8a72;--info:#5b9ec9;--ok:#69a879;--warn:#d8a743;--danger:#c1442e;
  --panel:rgba(16,21,27,.88);--line:rgba(216,167,67,.26);--line2:rgba(216,167,67,.5);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--ink)}
body{font-family:"Noto Serif SC",serif;color:var(--paper);-webkit-font-smoothing:antialiased}
#stage,#stage canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.num{font-family:Rajdhani,"Noto Serif SC",sans-serif;font-variant-numeric:tabular-nums}
#vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 52%,rgba(6,8,10,.46) 100%)}
#grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
header{position:fixed;top:0;left:0;right:0;z-index:7;display:flex;align-items:center;gap:14px;padding:12px 18px;pointer-events:none;
 background:linear-gradient(180deg,rgba(8,11,14,.9),rgba(8,11,14,.4) 72%,transparent)}
.brand{display:flex;align-items:center;gap:12px;pointer-events:auto}
.seal{width:42px;height:42px;flex:none;background:var(--verm);border-radius:6px;display:grid;place-items:center;
 font-family:"Ma Shan Zheng",serif;font-size:27px;color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.15) inset,0 6px 20px rgba(193,68,46,.4);transform:rotate(-4deg)}
.brand h1{font-family:"Ma Shan Zheng",serif;font-size:29px;font-weight:400;letter-spacing:5px;line-height:1;color:var(--paper)}
.brand h1 em{font-style:normal;color:var(--gold2)}
.brand p{font-size:10.5px;letter-spacing:3px;color:var(--paper3);margin-top:5px}
.topActs{margin-left:auto;display:flex;gap:8px;pointer-events:auto}
.ibtn{height:36px;padding:0 13px;border-radius:9px;border:1px solid var(--line2);background:var(--panel);color:var(--paper);
 display:flex;align-items:center;gap:7px;font-size:12px;cursor:pointer;font-family:inherit;backdrop-filter:blur(10px);transition:.18s}
.ibtn:hover{border-color:var(--gold2);color:var(--gold2);transform:translateY(-1px)}
.ibtn svg{width:15px;height:15px;fill:currentColor}.ibtn.off{color:var(--paper3)}
#chronicle{position:fixed;left:16px;top:82px;bottom:120px;width:236px;z-index:6;display:flex;flex-direction:column;
 background:var(--panel);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(12px);box-shadow:0 16px 50px rgba(0,0,0,.45);overflow:hidden}
#chronicle .head{padding:13px 15px 9px;border-bottom:1px solid var(--line)}
#chronicle .head h2{font-size:14px;letter-spacing:4px;color:var(--gold2);font-weight:700}
#chronicle .head p{font-size:10px;color:var(--paper3);letter-spacing:2px;margin-top:3px}
#stageList{flex:1;overflow-y:auto;padding:8px 8px 12px;scrollbar-width:thin;scrollbar-color:var(--gold) rgba(35,46,56,.6)}
#stageList::-webkit-scrollbar{width:7px}
#stageList::-webkit-scrollbar-track{background:rgba(35,46,56,.6);border-radius:4px}
#stageList::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold),#8a6420);border-radius:4px}
#stageList::-webkit-scrollbar-thumb:hover{background:var(--gold2)}
.srow{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:9px;cursor:pointer;position:relative;transition:.15s;border:1px solid transparent}
.srow:hover{background:rgba(216,167,67,.07)}
.srow .no{width:22px;height:22px;flex:none;border-radius:5px;display:grid;place-items:center;font-size:11px;
 background:var(--ink3);color:var(--paper3);border:1px solid rgba(255,255,255,.06);margin-top:1px}
.srow .tx b{display:block;font-size:12.5px;font-weight:600;color:var(--paper2)}
.srow .tx small{display:block;font-size:10px;color:var(--paper3);margin-top:2px;line-height:1.5}
.srow.done .no{background:rgba(105,168,121,.2);color:var(--ok);border-color:rgba(105,168,121,.4)}
.srow.done .tx b{color:var(--paper3)}
.srow.cur{background:linear-gradient(90deg,rgba(193,68,46,.22),rgba(216,167,67,.08));border-color:rgba(216,167,67,.35)}
.srow.cur .no{background:var(--verm);color:#fff;border-color:var(--verm2);box-shadow:0 0 12px rgba(193,68,46,.5)}
.srow.cur .tx b{color:var(--gold2)}
.srow .bar{position:absolute;left:40px;right:10px;bottom:3px;height:2px;border-radius:1px;background:rgba(216,167,67,.15);overflow:hidden;opacity:0}
.srow.cur .bar{opacity:1}.srow .bar i{display:block;height:100%;width:0;background:var(--gold)}
#craftCard{position:fixed;left:16px;bottom:16px;z-index:6;width:236px;background:var(--panel);border:1px solid var(--line);
 border-left:3px solid var(--verm);border-radius:12px;padding:12px 14px;backdrop-filter:blur(12px);box-shadow:0 12px 40px rgba(0,0,0,.4)}
#craftCard .k{font-size:10px;letter-spacing:3px;color:var(--paper3)}
#craftName{font-size:17px;font-weight:900;color:var(--gold2);margin:3px 0 5px}
#craftDesc{font-size:11px;line-height:1.75;color:var(--paper2)}
#craftStats{display:flex;gap:10px;margin-top:9px;padding-top:8px;border-top:1px dashed var(--line);font-size:10.5px;color:var(--paper3)}
#craftStats b{color:var(--paper);font-size:13px}
#console{position:fixed;top:82px;right:16px;bottom:16px;width:292px;z-index:6;overflow-y:auto;overflow-x:hidden;
 background:var(--panel);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(14px);box-shadow:0 16px 50px rgba(0,0,0,.5);
 padding:14px 14px 12px;scrollbar-width:thin;scrollbar-color:var(--gold) rgba(35,46,56,.6)}
#console::-webkit-scrollbar{width:8px}
#console::-webkit-scrollbar-track{background:rgba(35,46,56,.6);border-radius:4px}
#console::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold),#8a6420);border-radius:4px}
#console::-webkit-scrollbar-thumb:hover{background:var(--gold2)}
.sec{margin-bottom:15px}.sec h3{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:4px;color:var(--paper3);font-weight:700;margin-bottom:10px}
.sec h3:before{content:"";width:14px;height:2px;background:var(--verm)}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.row label{font-size:12.5px;color:var(--paper2)}
.val{font-size:12px;color:var(--gold2);min-width:42px;text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;flex:1}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(90deg,#3a2b22,#4d3a26)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;margin-top:-5.5px;
 background:var(--gold);border:2px solid #241a0c;box-shadow:0 0 0 3px rgba(216,167,67,.2),0 0 10px rgba(216,167,67,.45);transition:.15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);background:var(--gold2)}
input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:#4d3a26}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid #241a0c}
.srow2{display:.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论