代码语言：html

所属分类：其他

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

代码描述：三维雾隐山居木屋景色

代码标签： 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, maximum-scale=1.0, user-scalable=no">
<title>雾隐山居 · Misty Mountain Retreat</title>
<link rel="icon" href="data:,">
<style>
/* ============ 调色板：墨绿 / 雾灰 / 暖木棕 / 琥珀 ============ */
:root{
  --ink:#0c1712; --ink2:#122119; --panel:rgba(13,23,18,.78);
  --moss:#3c5748; --moss2:#24382d; --line:rgba(159,177,168,.16);
  --mist:#9fb1a8; --mist2:#6f827a; --paper:#f2ead9;
  --wood:#8a5f3c; --amber:#f2a648; --amber2:#ffcf8a;
  --blue:#7fa3d9; --danger:#e2694f;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:var(--ink)}
body{font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;color:var(--paper);-webkit-font-smoothing:antialiased}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#vig{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(6,12,9,.38) 100%)}
/* ============ 顶栏 ============ */
#topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:flex-start;justify-content:space-between;padding:14px 18px;pointer-events:none}
#brand{display:flex;align-items:center;gap:12px;pointer-events:auto}
#brand svg{width:44px;height:44px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
#brand .t1{font-family:"Songti SC","STSong","SimSun",serif;font-size:24px;letter-spacing:6px;color:var(--paper);text-shadow:0 2px 12px rgba(0,0,0,.6);line-height:1.1}
#brand .t2{font-size:9px;letter-spacing:.38em;color:var(--mist);margin-top:4px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
#topbtns{display:flex;gap:8px;pointer-events:auto}
.gbtn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(13,23,18,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--paper);font-size:12.5px;cursor:pointer;transition:.2s;letter-spacing:1px}
.gbtn:hover{border-color:rgba(242,166,72,.55);color:var(--amber2);box-shadow:0 0 16px rgba(242,166,72,.18)}
.gbtn svg{width:15px;height:15px;flex:none}
.gbtn.off{color:var(--mist2)}
/* ============ 底部提示 ============ */
#hint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:15;pointer-events:none;
  padding:8px 18px;border-radius:999px;background:rgba(13,23,18,.55);border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--mist);font-size:12px;letter-spacing:2px;white-space:nowrap}
#hint .m{display:none}
/* ============ 右侧常驻控制面板 ============ */
#panel{position:fixed;top:14px;right:14px;bottom:14px;width:296px;z-index:20;display:flex;flex-direction:column;
  background:var(--panel);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 44px rgba(0,0,0,.45);overflow:hidden}
.clockbox{padding:16px 18px 12px;border-bottom:1px solid var(--line);
  background:linear-gradient(160deg,rgba(60,87,72,.28),rgba(138,95,60,.12) 70%,transparent)}
#clock{font-size:46px;font-weight:600;letter-spacing:3px;line-height:1;font-variant-numeric:tabular-nums;color:var(--paper);text-shadow:0 0 22px rgba(242,166,72,.25)}
#clock .colon{animation:blink 2s steps(1) infinite;color:var(--amber)}
@keyframes blink{50%{opacity:.25}}
#phaseBadge{display:inline-block;margin-top:8px;padding:3px 11px;border-radius:999px;font-size:11px;letter-spacing:2px;
  background:rgba(242,166,72,.16);color:var(--amber2);border:1px solid rgba(242,166,72,.35);transition:.4s}
#phaseBadge.night{background:rgba(127,163,217,.14);color:#a9c4ea;border-color:rgba(127,163,217,.35)}
#dateLine{margin-top:7px;font-size:11px;color:var(--mist);letter-spacing:1.5px}
.pscroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 18px 14px;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--moss) transparent}
.pscroll::-webkit-scrollbar{width:8px}
.pscroll::-webkit-scrollbar-track{background:rgba(18,33,25,.6);border-radius:4px}
.pscroll::-webkit-scrollbar-thumb{background:var(--moss);border-radius:4px;border:1px solid rgba(0,0,0,.3)}
.pscroll::-webkit-scrollbar-thumb:hover{background:#5a7a63}
.grp{padding:12px 0 4px;border-bottom:1px dashed rgba(159,177,168,.12)}
.grp:last-child{border-bottom:none}
.gt{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.28em;color:var(--mist2);margin-bottom:10px}
.gt::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);box-shadow:0 0 6px rgba(242,166,72,.7)}
.row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.row label{font-size:12.5px;color:var(--paper);letter-spacing:1px}
.row output{font-size:11.5px;color:var(--amber2);font-variant-numeric:tabular-nums;letter-spacing:.5px}
/* 滑杆 */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--amber) var(--p),var(--moss2) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;margin-top:-5.5px;
  background:var(--amber);border:2px solid #1a2b23;box-shadow:0 0 10px rgba(242,166,72,.55);transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--amber) var(--p),var(--moss2) var(--p))}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--amber);border:2px solid #1a2b23;box-shadow:0 0 10px rgba(242,166,72,.55)}
input[type=range]:disabled{opacity:.35;cursor:default}
/* 芯片按钮 */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 10px}
.chip{padding:7px 0;border-radius:9px;border:1px solid var(--line);background:rgba(36,56,45,.35);
  color:var(--mist);font-size:11.5px;letter-spacing:1px;cursor:pointer;text-align:center;transition:.18s}
.chip:hover{color:var(--paper);border-color:rgba(242,166,72,.4)}
.chip:active{transform:scale(.94)}
.wbtn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0 7px;border-radius:11px;
  border:1px solid var(--line);background:rgba(36,56,45,.35);color:var(--mist);font-size:11.5px;cursor:pointer;transition:.2s;letter-spacing:1px}
.wbtn svg{width:17px;height:17px}
.wbtn:hover{color:var(--paper);border-color:rgba(242,166,72,.4)}
.wbtn.on{background:rgba(242,166,72,.16);border-color:rgba(242,166,72,.6);color:var(--amber2);box-shadow:0 0 14px rgba(242,166,72,.15) inset}
/* 开关 */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 10px}
.switch{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;
  border:1px solid var(--line);background:rgba(36,56,45,.3);cursor:pointer;font-size:12px;color:var(--mist);transition:.2s;user-select:none}
.switch:hover{border-color:rgba(242,166,72,.35)}
.switch input{display:none}
.switch .knob{flex:none;width:30px;height:17px;border-radius:999px;background:var(--moss2);position:relative;transition:.2s;border:1px solid rgba(0,0,0,.35)}
.switch .knob::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:var(--mist2);transition:.2s}
.switch input:checked~.knob{background:rgba(242,166,72,.5)}
.switch input:checked~.knob::after{left:15px;background:var(--amber2);box-shadow:0 0 8px rgba(242,166,72,.8)}
.switch input:checked~.lbl{color:var(--paper)}
.switch .lbl{letter-spacing:1px}
/* 下拉 */
select{width:100%;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(36,56,45,.4);
  color:var(--paper);font-size:12.5px;letter-spacing:1px;cursor:pointer;appearance:none;-webkit-appearance:none;outline:none}
.selwrap{position:relative;margin-bottom:8px}
.selwrap::after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--amber);pointer-events:none;font-size:11px}
select option{background:var(--ink2);color:var(--paper)}
/* 操作按钮 */
.actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin:6px 0 4px}
.btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 2px;border-radius:11px;cursor:pointer;
  border:1px solid rgba(242,166,72,.3);background:linear-gradient(160deg,rgba(138,95,60,.28),rgba(36,56,45,.4));
  color:var(--paper);font-size:11px;letter-spacing:1px;transition:.2s}
.btn svg{width:16px;height:16px;color:var(--amber)}
.btn:hover{border-color:var(--amber);box-shadow:0 0 16px rgba(242,166,72,.2);transform:translateY(-1px)}
.btn:active{transform:scale(.95)}
.foot{padding:10px 0 2px;font-size:9.5px;color:var(--mist2);letter-spacing:2px;text-align:center}
/* ============ Toast ============ */
#toast{position:fixed;left:18px;bottom:18px;z-index:30;padding:10px 18px;border-radius:12px;font-size:12.5px;letter-spacing:1px;
  background:rgba(13,23,18,.85);border:1px solid rgba(242,166,72,.45);color:var(--amber2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(0,0,0,.4);
  opacity:0;transform:translateY(8px);transition:.3s;pointer-events:none;max-width:70vw}
#toast.show{opacity:1;transform:translateY(0)}
/* ============ 加载 / 错误 ============ */
#loader,#fatal{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(ellipse at 50% 60%,#16281f 0%,#0c1712 70%);transition:opacity .7s}
#loader.done{opacity:0;pointer-events:none}
#loader svg,#fatal svg{width:76px;height:76px}
#loader .lt{font-family:"Songti SC","STSong","SimSun",serif;font-size:30px;letter-spacing:10px;color:var(--paper)}
#l.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论