three实现三维安全城市驾驶体验扣分代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维安全城市驾驶体验扣分代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>城市安全驾驶 · 12分驾照挑战</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#0d1117; --panel:rgba(16,21,29,.88); --line:#2b3542;
  --yellow:#ffc53d; --red:#ff4d4d; --green:#2ecc71; --cyan:#5ad1e6;
  --ink:#e9eef5; --dim:#8fa0b3;
  --disp:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;
  --num:'Rajdhani','Noto Sans SC',sans-serif;
  --body:'Noto Sans SC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--body)}
#scene{position:fixed;inset:0;z-index:0}
#scene canvas{display:block}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}

/* ---------- 通用面板 / 条纹 ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(4px)}
.hazard{height:6px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 12px,#151a21 12px 24px)}

/* ---------- 开始界面（车库） ---------- */
#menu{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(100deg,rgba(7,10,15,.93) 0%,rgba(7,10,15,.78) 46%,rgba(7,10,15,.35) 100%)}
.menu-wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;width:min(1180px,94vw);max-height:94vh;overflow:auto;padding:26px 10px}
.brand-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.badge-sim{font-family:var(--num);font-weight:700;letter-spacing:.22em;font-size:12px;color:#101418;
  background:var(--yellow);padding:4px 10px;border-radius:4px;transform:skewX(-8deg)}
.ver{font-size:12px;color:var(--dim);letter-spacing:.12em}
.title{font-family:var(--disp);font-weight:400;font-size:clamp(46px,6.4vw,80px);line-height:1.04;letter-spacing:.03em}
.title .hl{color:var(--yellow);text-shadow:0 0 26px rgba(255,197,61,.35)}
.subtitle{margin:10px 0 22px;color:var(--dim);font-size:15px;letter-spacing:.28em}
.sec-title{font-family:var(--disp);font-size:17px;letter-spacing:.14em;color:#c8d3e0;margin:18px 0 10px;display:flex;align-items:center;gap:10px}
.sec-title::after{content:'';flex:1;height:1px;background:var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:6px;padding:6px 10px;font-size:13px;color:#c4cfdd}
.chip b{font-family:var(--num);font-weight:700;margin-left:6px}
.chip.neg b{color:var(--red)} .chip.pos b{color:var(--green)}
.keys-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.keys-grid .chip kbd{margin-right:6px}
kbd{font-family:var(--num);font-weight:700;font-size:12px;background:#1c2430;border:1px solid #39465a;border-bottom-width:3px;border-radius:5px;padding:2px 7px;color:#dfe7f2}

.garage-head{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.garage-head h2{font-family:var(--disp);font-weight:400;font-size:26px;letter-spacing:.1em}
.garage-head span{font-family:var(--num);letter-spacing:.3em;font-size:11px;color:var(--dim)}
.car-card{display:grid;grid-template-columns:86px 1fr auto;gap:14px;align-items:center;padding:12px 14px;margin:10px 0;
  border:1px solid var(--line);border-left:4px solid transparent;border-radius:10px;background:rgba(15,20,28,.82);
  cursor:pointer;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
.car-card:hover{transform:translateX(5px);background:rgba(22,29,40,.92)}
.car-card.sel{border-left-color:var(--yellow);border-color:rgba(255,197,61,.55);box-shadow:0 0 0 1px rgba(255,197,61,.25),0 8px 26px rgba(0,0,0,.45)}
.cc-name{font-family:var(--disp);font-size:19px;letter-spacing:.06em}
.cc-en{font-family:var(--num);font-size:11px;letter-spacing:.24em;color:var(--dim)}
.cc-desc{font-size:12px;color:var(--dim);margin-top:3px}
.cc-stats{display:flex;flex-direction:column;gap:4px;min-width:120px}
.stat{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim)}
.stat i{flex:1;height:5px;background:#202a37;border-radius:3px;overflow:hidden;position:relative}
.stat i::after{content:'';position:absolute;inset:0;width:calc(var(--v)*20%);background:var(--yellow);border-radius:3px}
.cc-pick{font-size:11px;color:var(--dim);border:1px solid var(--line);padding:4px 10px;border-radius:20px;letter-spacing:.15em}
.car-card.sel .cc-pick{color:#101418;background:var(--yellow);border-color:var(--yellow);font-weight:700}

/* 车辆俯视图 CSS 艺术 */
.cartop{position:relative;width:56px;height:96px;margin:0 auto;filter:drop-shadow(0 7px 9px rgba(0,0,0,.55));transition:transform .25s}
.car-card:hover .cartop{transform:rotate(-5deg) scale(1.06)}
.ct-w{position:absolute;width:10px;height:20px;background:#0b0e12;border-radius:3px}
.ct-w.w1{left:-4px;top:12px}.ct-w.w2{right:-4px;top:12px}.ct-w.w3{left:-4px;bottom:12px}.ct-w.w4{right:-4px;bottom:12px}
.ct-b{position:absolute;inset:0 3px;border-radius:16px 16px 13px 13px/24px 24px 15px 15px;
  background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(255,255,255,.2) 22%,rgba(255,255,255,.2) 78%,rgba(0,0,0,.4)),var(--c)}
.ct-g{position:absolute;left:11px;right:11px;border-radius:7px;background:#141c26}
.ct-g.f{top:24px;height:17px}.ct-g.r{bottom:16px;height:12px}
.ct-s{position:absolute;left:17px;right:17px;top:45px;height:9px;border-radius:3px;background:rgba(0,0,0,.35)}

#startBtn{width:100%;margin-top:16px;padding:15px;font-family:var(--disp);font-size:23px;letter-spacing:.28em;color:#101418;
  background:linear-gradient(180deg,#ffd469,#f5b31c);border:none;border-radius:10px;box-shadow:0 6px 0 #8a6206,0 14px 30px rgba(0,0,0,.5);
  transition:transform .12s,box-shadow .12s}
#startBtn:hover{transform:translateY(-2px);box-shadow:0 8px 0 #8a6206,0 18px 34px rgba(0,0,0,.55).........完整代码请登录后点击上方下载按钮下载查看