代码语言：html

所属分类：其他

代码由glm-5.3-flash 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,maximum-scale=1,user-scalable=no"/>
<meta name="color-scheme" content="dark"/>
<title>雪国蒸汽 · Snowbound Steam</title>
<style>
/* ============ 基础 ============ */
:root{
  --gold:#e8b64c; --red:#c5352b; --blue:#7fa8c9;
  --ink:#e9edf3; --mut:#96a1b0;
  --pan:rgba(12,15,21,.84); --line:rgba(255,255,255,.09);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#0b0e13;color:var(--ink);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif}
canvas{display:block;touch-action:none}
button{font-family:inherit;cursor:pointer}

/* ============ 标题 / 提示 / 声音 ============ */
#hud{position:fixed;top:18px;left:22px;z-index:5;pointer-events:none;text-shadow:0 2px 12px rgba(0,0,0,.7)}
#hud h1{font-size:23px;font-weight:700;letter-spacing:.06em;
  background:linear-gradient(180deg,#f6e3b0,#e8b64c 60%,#b97f2e);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#hud h1 i{font-style:normal;font-size:15px;font-weight:600;margin-left:10px;letter-spacing:.12em;
  background:linear-gradient(180deg,#dfe7f2,#9fb0c4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#hud p{margin-top:4px;font-size:10px;letter-spacing:.42em;color:#aeb9c8}
#hint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:5;
  font-size:12px;letter-spacing:.18em;color:#c3ccd8;background:rgba(10,13,18,.55);
  border:1px solid var(--line);border-radius:20px;padding:7px 18px;backdrop-filter:blur(6px);pointer-events:none}
#soundBtn{position:fixed;top:18px;right:18px;z-index:6;display:flex;align-items:center;gap:8px;
  color:var(--ink);background:var(--pan);border:1px solid var(--line);border-radius:20px;
  padding:8px 15px;font-size:12px;letter-spacing:.1em;backdrop-filter:blur(10px);transition:border-color .2s}
#soundBtn:hover{border-color:var(--gold)}
#soundBtn svg{width:15px;height:15px;fill:var(--gold)}

/* ============ 控制面板 ============ */
#panel{position:fixed;top:66px;right:14px;bottom:14px;width:262px;z-index:6;
  background:var(--pan);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(14px);overflow-y:auto;overscroll-behavior:contain;padding:14px 14px 18px}
#panel::-webkit-scrollbar{width:6px}
#panel::-webkit-scrollbar-thumb{background:rgba(232,182,76,.4);border-radius:3px}
#panel::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
.p-head{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.3em;color:var(--mut);margin-bottom:10px}
.p-head .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.odo-row{display:flex;gap:8px;margin-bottom:12px}
.odo-row>div{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:9px;padding:7px 10px}
.odo-row i{display:block;font-style:normal;font-size:9px;letter-spacing:.2em;color:var(--mut)}
.odo-row b{font-size:17px;color:var(--gold);font-variant-numeric:tabular-nums;font-weight:700}
.odo-row u{text-decoration:none;font-size:9px;color:var(--mut);margin-left:4px}
.grp{margin-bottom:11px}
.grp.half{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.grp label{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:#c6ceda;margin-bottom:5px;letter-spacing:.05em}
.grp.half>label{margin-bottom:0}
.grp label b{color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,#2a2f3a,#8d97a5)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffe9b8,#e8b64c 65%,#a97b25);border:1px solid #6e5218;
  box-shadow:0 0 6px rgba(232,182,76,.55)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,#2a2f3a,#8d97a5)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#e8b64c;border:1px solid #6e5218}
/* 开关 */
.sw{position:relative;display:inline-block;width:36px;height:19px;flex:none}
.sw input{opacity:0;width:0;height:0}
.sw span{position:absolute;inset:0;border-radius:19px;background:#2a2f38;border:1px solid var(--line);transition:.2s}
.sw span::before{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;
  background:#8d97a5;transition:.2s}
.sw input:checked+span{background:linear-gradient(90deg,#8a6a24,#e8b64c)}
.sw input:checked+span::before{transform:translateX(17px);background:#fff8e8}
/* 分段按钮 */
.seg{display:flex;gap:4px}
.seg button{flex:1;padding:6px 2px;font-size:11px;letter-spacing:.04em;color:#b9c2ce;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;transition:.15s}
.seg button:hover{border-color:var(--blue)}
.seg button.on{background:linear-gradient(180deg,#f0c968,#d9a53c);color:#181206;font-weight:700;border-color:#e8b64c}
/* 动作按钮 */
.acts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:13px}
.acts button{padding:9px 2px;font-size:12px;letter-spacing:.06em;color:var(--ink);
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:9px;transition:.15s}
.acts button:hover{border-color:var(--gold);color:#ffe9b8}
.acts button:active{transform:scale(.96)}
#btnWhistle{color:#ffd98e;border-color:rgba(232,182,76,.45)}
.divi{height:1px;background:var(--line);margin:13px 0 11px}

/* ============ 启动 / 错误 ============ */
#boot{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:#0b0e13;font-size:14px;letter-spacing:.35em;color:var(--gold);animation:pu 1.6s ease-in-out infinite}
@keyframes pu{50%{opacity:.35}}
#err{position:fixed;inset:0;z-index:30;display:none;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;background:#12151c;text-align:center;padding:30px}
#err b{font-size:19px;color:var(--red);letter-spacing:.15em}
#err span{max-width:420px;font-size:13px;line-height:1.9;color:#aeb9c8}

/* ============ 窄屏：面板转为底部常驻 ============ */
@media (max-width:880px){
  #hud{top:12px;left:14px}
  #hud h1{font-size:17px}
  #hud h1 i{font-size:12px;margin-left:7px}
  #hud p{font-size:8px;letter-spacing:.3em}
  #soundBtn{top:12px;right:12px;padding:6px 11px}
  #hint{display:none}
  #panel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:37vh;
    border-radius:16px 16px 0 0;border-left:none;border-right:none;border-bottom:none;padding:11px 14px 16px}
  .odo-row b{font-size:15px}
}
</style>
</head>
<body>

<header id="hud">
  <h1>雪国蒸汽<i>Snowbound Steam</i></h1>
  <p>.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论