代码语言：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, viewport-fit=cover">
<title>篮球场沙盘 · Courtside Isometric Diorama</title>
<style>
/* ============================================================
   UI 样式 —— 与沙盘同源的「马卡龙 + 玩具」视觉语言
   ============================================================ */
:root{
  --ink:#2B3552; --paper:#FFFBF4; --line:#EADFC9; --muted:#8A7A66;
  --butter:#F5D08C; --teamA:#F07A6A; --teamB:#5E9FCC; --mint:#9CCFA0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; height:100vh; height:100dvh; overflow:hidden; background:#FFFFFF;
  display:grid; grid-template-columns:minmax(0,1fr) 318px;
  font-family:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  color:var(--ink);
}
#stage{position:relative; min-width:0; min-height:0; background:#FFFFFF}
#stage canvas{display:block; width:100%; height:100%; touch-action:none}

/* —— 标题区 —— */
.title{position:absolute; top:18px; left:22px; pointer-events:none; user-select:none}
.title .badge{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:2.5px;
  color:var(--muted); border:2px solid var(--line); border-radius:999px;
  padding:3px 10px; background:#FFFFFFCC; margin-bottom:8px;
}
.title h1{margin:0; font-size:27px; font-weight:900; letter-spacing:2px; line-height:1.1}
.title h1 em{font-style:normal; color:var(--teamA)}
.title .sub{margin-top:5px; font-size:11px; letter-spacing:2px; color:var(--muted); font-weight:600}
.title .bar{width:120px; height:5px; border-radius:3px; margin-top:9px;
  background:linear-gradient(90deg,var(--teamA),var(--butter),var(--teamB));}

/* —— 顶部声音开关 / 底部提示 —— */
.chip{
  border:2px solid var(--ink); background:#FFFFFF; color:var(--ink);
  border-radius:999px; padding:7px 14px; font-size:12px; font-weight:700;
  box-shadow:3px 3px 0 rgba(43,53,82,.14); cursor:pointer; font-family:inherit;
  transition:transform .12s, box-shadow .12s;
}
.chip:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 rgba(43,53,82,.18)}
.chip:active{transform:translate(2px,2px); box-shadow:0 0 0 rgba(0,0,0,0)}
#soundBtn{position:absolute; top:16px; right:16px}
#soundBtn.off{background:#F3ECE0; color:var(--muted)}
.hint{
  position:absolute; left:20px; bottom:14px; pointer-events:none; user-select:none;
  font-size:11px; font-weight:600; color:var(--muted);
  background:#FFFFFFD9; border:2px solid var(--line); border-radius:999px; padding:6px 13px;
}
.hint b{color:var(--ink)}

/* —— 悬停提示 —— */
#tooltip{
  position:absolute; z-index:5; pointer-events:none; opacity:0; transform:translate(-50%,-135%);
  background:var(--ink); color:#FFF; border-radius:10px; padding:7px 12px;
  font-size:12px; font-weight:700; white-space:nowrap; transition:opacity .15s;
  box-shadow:3px 3px 0 rgba(43,53,82,.18);
}
#tooltip .dot{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:7px; vertical-align:1px}
#tooltip small{display:block; font-weight:500; color:#C9D3E8; margin-top:2px; font-size:10.5px; letter-spacing:1px}

/* —— 加载遮罩 —— */
#loader{position:absolute; inset:0; z-index:9; background:#FFFFFF; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition:opacity .5s;}
#loader.done{opacity:0; pointer-events:none}
.ld-ball{width:26px; height:26px; border-radius:50%; background:#F0742C; border:2.5px solid var(--ink);
  animation:ldbounce .7s cubic-bezier(.5,.05,.5,1) infinite alternate;}
.ld-shadow{width:34px; height:7px; border-radius:50%; background:rgba(43,53,82,.15); margin-top:-12px;
  animation:ldsquash .7s cubic-bezier(.5,.05,.5,1) infinite alternate;}
@keyframes ldbounce{from{transform:translateY(-30px)}to{transform:translateY(4px) scaleY(.88)}}
@keyframes ldsquash{from{transform:scaleX(.6);opacity:.4}to{transform:scaleX(1.15);opacity:1}}
#loaderMsg{font-size:13px; font-weight:600; color:var(--muted); text-align:center; line-height:1.8}
#loaderMsg button{margin-top:6px}

/* ============================================================
   控制面板（常驻右侧 / 移动端底部）
   ============================================================ */
.panel{
  background:var(--paper); border-left:2px solid var(--ink);
  overflow-y:auto; overflow-x:hidden; padding:16px 16px 20px;
  scrollbar-width:thin; scrollbar-color:#E4B98C #FBF3E6;
}
.panel::-webkit-scrollbar{width:10px}
.panel::-webkit-scrollbar-track{background:#FBF3E6}
.panel::-webkit-scrollbar-thumb{background:#E4B98C; border-radius:6px; border:2px solid #FBF3E6}
.panel::-webkit-scrollbar-thumb:hover{background:var(--teamA)}

.p-head{margin-bottom:14px}
.p-title{font-size:16px; font-weight:900; letter-spacing:2px; display:flex; align-items:center; justify-content:space-between}
.live{font-size:9px; letter-spacing:1.5px; color:#5FA872; font-weight:800}
.live i{display:inline-block; width:7px; height:7px; border-radius:50%; background:#6FC088; margin-right:4px; animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.p-sub{font-size:9.5px; letter-spacing:3px; color:var(--muted); font-weight:700; margin-top:3px}
.strip{display:block; height:5px; border-radius:3px; margin-top:10px;
  background:linear-gradient(90deg,var(--teamA),var(--butter) 50%,var(--teamB));}

.panel section{border-top:2px dashed var(--line); padding:12px 0 10px}
.sec-label{font-size:10px; font-weight:800; letter-spacing:2.5px; color:var(--muted); margin-bottom:10px}

.ctl{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.ctl>label{flex:0 0 62px; font-size:12px; font-weight:700}
.ctl output{flex:0 0 46px; text-align:right; font-size:11px; font-weight:700; color:var(--muted);
  font-family:"SF Mono",Consolas,"Courier New",monospace;}
.ctl.switch{justify-content:space-between}
.ctl.switch>label{flex:1}

/* 滑杆 */
input[type=range]{flex:1; appearance:none; -webkit-appearance:none; height:22px; background:transparent; cursor:pointer; min-width:0}
input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:3px; background:#EFE0CB; border:1px solid var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; margin-top:-6px;
  border-radius:5px; background:#FFF; border:2px solid var(--ink); box-shadow:2px 2px 0 rgba(43,53,82,.2); transition:background .12s}
input[type=range]:hover::-webkit-slider-thumb{background:#FFD9CF}
input[type=range]::-moz-range-track{height:6px; border-radius:3px; background:#EFE0CB; border:1px solid var(--line)}
input[type=range]::-moz-range-thumb{width:12px; height:12px; border-radius:5px; background:#FFF; border:2px solid var(--ink)}
input[type=range]:hover::-moz-range-thumb{background:#FFD9CF}

/* 开关 */
.tgl{position:relative; width:42px; height:23px; flex:0 0 42px}
.tgl input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论