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"/>
<title>天路 · 高原行车模拟</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;900&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0b1118}
body{font-family:'Rajdhani','Noto Serif SC','Microsoft YaHei',sans-serif;color:#edf3f7;-webkit-user-select:none;user-select:none}
canvas{display:block;touch-action:none}
#vig{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(5,9,15,.45) 100%);z-index:5}
.hud-el{position:fixed;z-index:10;pointer-events:none}
#plate{top:22px;left:24px;padding:12px 18px 13px;border-left:3px solid #d2a45a;background:rgba(9,14,21,.55);backdrop-filter:blur(6px)}
#plate .no{font:700 25px/1 Rajdhani;letter-spacing:2px;color:#f4f7fa}
#plate .no em{font-style:normal;color:#d2a45a}
#plate .nm{margin-top:6px;font:600 13px/1 'Noto Serif SC';letter-spacing:6px;color:#c8d2da}
#plate .sub{margin-top:5px;font:500 9px/1 Rajdhani;letter-spacing:3px;color:#7d8b96}
#stat{top:22px;right:22px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.st-row{display:flex;gap:10px;align-items:center;background:rgba(9,14,21,.55);border:1px solid rgba(255,255,255,.12);padding:9px 16px;backdrop-filter:blur(6px)}
.st-row .k{font:600 11px 'Noto Serif SC';letter-spacing:3px;color:#8fa0ac}
.st-row .v{font:700 18px/1 Rajdhani;letter-spacing:1px;color:#e9eef3;min-width:86px;text-align:right}
.dot{width:7px;height:7px;border-radius:50%;background:#d2a45a;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.2}}
#stTxt{font:600 15px 'Noto Serif SC';letter-spacing:5px;color:#f0f4f7}
#spd{left:24px;bottom:22px;width:236px;padding:12px 12px 12px;background:rgba(9,14,21,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px)}
#spd .wrap{position:relative}
#spdNum{position:absolute;left:0;right:0;top:86px;text-align:center;pointer-events:none}
#spdNum .v{font:700 48px/1 Rajdhani;color:#f4f8fa}
#spdNum .u{margin-top:1px;font:600 11px Rajdhani;letter-spacing:3px;color:#8fa0ac}
#doorRow{margin-top:6px;display:flex;justify-content:space-between;align-items:baseline;padding:0 4px}
#doorRow .k{font:600 11px 'Noto Serif SC';letter-spacing:3px;color:#8fa0ac}
#doorV{font:700 14px 'Noto Serif SC';letter-spacing:2px;color:#d2a45a}
#stbar{left:50%;bottom:26px;transform:translateX(-50%);display:flex;align-items:baseline;gap:14px;padding:13px 28px;background:rgba(9,14,21,.62);border:1px solid rgba(255,255,255,.12);border-top:2px solid rgba(210,164,90,.55);backdrop-filter:blur(6px);white-space:nowrap}
#stbar .lab{font:600 11px 'Noto Serif SC';letter-spacing:4px;color:#9fb0bd}
#stbar .nm{font:900 25px/1 'Noto Serif SC';letter-spacing:8px;color:#f5f8fa}
#stbar .en{font:600 11px Rajdhani;letter-spacing:3px;color:#8fa0ac}
#stbar .dist{font:700 25px/1 Rajdhani;color:#e8c37c;min-width:150px;text-align:right}
#toast{top:14%;left:50%;transform:translate(-50%,-10px);opacity:0;transition:.45s;padding:11px 30px;background:rgba(8,13,20,.74);border:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(210,164,90,.75);font:600 15px 'Noto Serif SC';letter-spacing:3px;backdrop-filter:blur(4px)}
#toast.show{opacity:1;transform:translate(-50%,0)}
#ctl{right:22px;bottom:22px;display:flex;gap:8px;pointer-events:auto}
#ctl button{background:rgba(9,14,21,.55);border:1px solid rgba(255,255,255,.16);color:#cfd9e0;font:600 13px Rajdhani,'Noto Serif SC';letter-spacing:2px;padding:8px 13px;cursor:pointer;backdrop-filter:blur(4px);transition:.18s}
#ctl button:hover{border-color:#d2a45a;color:#fff}
#ctl button.on{border-color:#d2a45a;color:#ecd9ae}
#intro{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(7,11,17,.68);backdrop-filter:blur(7px);transition:opacity .9s}
#intro.hide{opacity:0;pointer-events:none}
#intro h1{font:900 84px/1 'Noto Serif SC';letter-spacing:.45em;text-indent:.45em;color:#f2f6f9}
#intro .en{margin-top:14px;font:600 13px Rajdhani;letter-spacing:8px;color:#d2a45a}
#intro .sub{margin-top:30px;font:600 14px 'Noto Serif SC';letter-spacing:7px;color:#aebbc6}
#intro .rule{width:64px;height:1px;background:#d2a45a;margin:32px 0 24px}
#intro .keys{font:500 12px Rajdhani,'Noto Serif SC';letter-spacing:2px;color:#7d8b96}
#startBtn{margin-top:42px;padding:14px 62px;background:transparent;border:1px solid #d2a45a;color:#ecd9ae;font:600 17px 'Noto Serif SC';letter-spacing:12px;text-indent:12px;cursor:pointer;transition:.25s}
#startBtn:hover{background:#d2a45a;color:#141a22}
@media(max-width:820px){
 #spd{transform:scale(.8);transform-origin:left bottom}
 #plate{transform:scale(.85);transform-origin:top left}
 #stbar{max-width:96vw;padding:10px 14px;gap:8px}
 #stbar .nm{font-size:19px;letter-spacing:4px}
 #stbar .dist{font-size:19px;min-width:110px}
 #intro h1{font-size:56px}
 #ctl{flex-wrap:wrap;justify-content:flex-end;max-width:70vw}
}
</style>
</head>
<body>.........完整代码请登录后点击上方下载按钮下载查看