代码语言：html

所属分类：三维

代码描述：three实现三维像素风街角篮球场动画代码

代码标签： 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">
<title>街角球场 · 3D 像素艺术沙盘</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#22303c; --paper:#ffffff; --panel:#fbfaf7; --line:#e6e2d8;
  --blue:#3f74ad; --blue-deep:#2b5d8a; --sky:#eef4fa;
  --orange:#e4572e; --amber:#f2a541; --green:#6a9a4e; --red:#d94f3d;
  --shadow:#d8e2ec;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:'Noto Sans SC',system-ui,sans-serif;background:var(--paper);color:var(--ink);display:flex;flex-direction:column}
h1,h2,.disp{font-family:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;font-weight:400}

/* ---------- 顶栏 ---------- */
#topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 18px;background:var(--paper);border-bottom:2px solid var(--ink);z-index:20;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;font-size:22px;
  background:var(--orange);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:6px}
.brand h1{font-size:24px;letter-spacing:1px;line-height:1}
.brand h1 span{font-size:13px;color:var(--blue);letter-spacing:2px;margin-left:6px}
.brand p{font-size:11px;color:#7a8794;margin-top:3px;letter-spacing:.5px}
.top-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#scoreChip{display:flex;align-items:center;gap:8px;background:#1d2733;color:#f4f1e6;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow);padding:7px 12px;border-radius:6px;font-size:13px}
#scoreChip b{font-family:'ZCOOL QingKe HuangYou',monospace;font-size:20px;min-width:22px;text-align:center;color:#fff}
.dot{width:10px;height:10px;border-radius:2px;border:1.5px solid #0c141c;display:inline-block}
.dotA{background:var(--orange)} .dotB{background:#5b8fd9}
#clockChip{font-family:monospace;font-weight:700;color:var(--amber);background:#0c141c;padding:2px 7px;border-radius:4px;font-size:14px}
#clockChip.hot{color:#ff6b52;animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}

/* ---------- 按钮 ---------- */
.btn{font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);background:var(--paper);
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:8px 12px;border-radius:6px;
  cursor:pointer;transition:transform .08s,box-shadow .08s;user-select:none}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.primary{background:var(--blue);color:#fff}
.btn.warm{background:var(--orange);color:#fff}
.btn.amber{background:var(--amber);color:var(--ink)}
.btn:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* ---------- 主区 ---------- */
main{flex:1;display:flex;min-height:0}
#stage{flex:1;position:relative;min-width:0;background:var(--paper)}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;touch-action:none;cursor:grab}
#view.drag{cursor:grabbing}
#liveChip{position:absolute;top:14px;left:14px;background:#fff;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow);
  padding:5px 10px;border-radius:6px;font-size:12px;font-weight:700;pointer-events:none}
#liveChip i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:6px;animation:blink 1.2s steps(2) infinite}
#liveChip.paused i{background:var(--amber);animation:none}
#hint{position:absolute;left:14px;bottom:12px;font-size:12px;color:#8a97a3;background:rgba(255,255,255,.85);
  padding:4px 10px;border-radius:6px;border:1.5px solid var(--line);pointer-events:none}
#popups{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pop{position:absolute;transform:translate(-50%,-100%);font-family:'ZCOOL QingKe HuangYou',sans-serif;
  font-size:26px;color:var(--orange);text-shadow:2px 2px 0 var(--ink);white-space:nowrap;animation:rise 1.15s ease-out forwards}
.pop.miss{color:#8a97a3;font-size:20px}
.pop.warn{color:var(--red);font-size:20px}
@keyframes rise{0%{opacity:0;margin-top:8px}12%{opacity:1}80%{opacity:1}100%{opacity:0;margin-top:-46px}}
#toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%,20px);background:var(--ink);color:#fff;
  font-size:13px;padding:8px 16px;border-radius:6px;border:2px solid #0c141c;box-shadow:3px 3px 0 rgba(34,48,60,.25);
  opacity:0;transition:.25s;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,0)}
#loader{position:absolute;inset:0;background:var(--paper);display:flex;flex-direction:column;gap:18px;
  align-items:center;justify-content:center;z-index:10;transition:opacity .4s}
#loader.hide{opacity:0;pointer-events:none}
.pball{width:34px;height:34px;background:var(--orange);border:3px solid var(--ink);border-radius:6px;
  box-shadow:3px 3px 0 var(--shadow);animation:bounce .7s cubic-bezier(.5,0,.5,1) infinite alternate}
@keyframes bounce{from{transform:translateY(-26px) rotate(0)}to{transform:translateY(8px) rotate(90deg)}}
#loader p{font-size:14px;color:#7a8794;letter-spacing:2px}
#loader .err{color:var(--red);font-weight:700;max-width:420px;text-align:center;line-height:1.7}

/* ---------- 控制面板 ---------- */
#panel{flex:0 0 318px;background:var(--panel);border-left:2px solid var(--ink);overflow-y:auto;
  padding:14px 14px 20px;scrollbar-width:thin;scrollbar-color:var(--blue) #f1efe8}
#panel::-webkit-scrollbar{width:10px}
#panel::-webkit-scrollbar-track{background:#f1efe8;border-left:2px solid var(--line)}
#panel::-webkit-scrollbar-thumb{background:var(--blue);border:2px solid #f1efe8;border-radius:6px}
#panel::-webkit-scrollbar-thumb:hover{background:var(--orange)}
.phead{display:flex;align-items:baseline;justify-content:space-between;margin:2px 2px 12px}
.phead h2{font-size:20px;letter-spacing:2px}
.phead span{font-size:10px;color:#9aa6b1;letter-spacing:2px}
.group{background:#fff;border:2px solid var(--ink);border-radius:8px;box-shadow:4px 4px 0 var(--shadow);
  margin-bottom:14px;overflow:hidden;animation:gin .5s ease-out backwards}
.group:nth-of-type(2){animation-delay:.08s}.group:nth-of-type(3){animation-delay:.16s}
.group:nth-of-type(4){animation-delay:.24s}.group:nth-of-type(5){animation-delay:.32s}
@keyframes gin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.gtitle{display:flex;align-items:center;gap:8px;background:var(--sky);border-bottom:2px solid var(--ink);
  padding:7px 12px;font-weight:700;font-size:13px;letter-spacing:1px}
.gtitle em{font-style:normal;font-size:10px;col.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论