svg仓鼠驾驶复古发条单轮车交互动画代码-html代码-BFW代码库

svg仓鼠驾驶复古发条单轮车交互动画代码

代码语言：html

所属分类：其他

代码由qwen-3.8 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：svg仓鼠驾驶复古发条单轮车交互动画

下面为部分代码预览，完整代码请点击下载或在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>仓鼠骑士 · 复古发条单轮车</title>
<style>
  :root{ --ink:#5b3a29; --brown:#7a4a2b; --dark:#3a2513; --cream:#f4e7c3; --paper:#fffdf4; --red:#c9553d; --brass:#c9a227; }
  *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  body{
    min-height:100vh; display:flex; flex-direction:column; align-items:center; gap:14px;
    padding:18px 12px 26px; background:#241a12;
    background-image:repeating-linear-gradient(45deg, rgba(255,235,200,.03) 0 12px, transparent 12px 24px);
    font-family:"Palatino Linotype",Palatino,Georgia,"STKaiti","KaiTi",serif;
    color:var(--ink); user-select:none; -webkit-user-select:none;
  }
  header h1{ color:#f0d9a0; font-size:clamp(20px,3.4vw,30px); letter-spacing:4px; text-shadow:0 2px 0 #00000066; }
  header h1 span{ color:#d9a45b; font-size:.62em; letter-spacing:2px; }
  .stage-card{
    position:relative; width:min(92vw,880px); background:var(--cream);
    border:9px solid var(--brown); border-radius:18px;
    box-shadow:0 0 0 4px #d9b26a, 0 18px 40px rgba(0,0,0,.55); overflow:hidden;
  }
  svg{ display:block; width:100%; height:auto; }
  /* ---------- HUD ---------- */
  .hud{ position:absolute; font-size:13px; pointer-events:none; }
  .hud-top{ top:10px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
  .panel{ background:rgba(255,253,244,.85); border:2px solid var(--brown); border-radius:10px; padding:8px 12px; box-shadow:0 2px 0 rgba(90,60,30,.25); }
  .gauge label,.stats label{ display:block; font-size:11px; letter-spacing:2px; color:#8a6a4a; margin-bottom:3px; }
  .bar{ width:190px; height:14px; border:2px solid var(--brown); border-radius:8px; overflow:hidden;
        background:repeating-linear-gradient(90deg,#efe0bb 0 17px,#e2cf9f 17px 19px); }
  .bar i{ display:block; height:100%; width:45%; background:linear-gradient(90deg,#7fae5a,#e8a33d 55%,#c9553d); transition:width .12s linear; }
  .gauge b{ font-size:12px; }
  .stats{ display:flex; gap:14px; }
  .stats b{ font-size:16px; color:var(--dark); font-variant-numeric:tabular-nums; }
  .status{ left:50%; transform:translateX(-50%); bottom:10px; }
  .status span{ background:rgba(59,37,19,.85); color:#f6e3b8; padding:5px 16px; border-radius:999px; border:1.5px solid #d9b26a; font-size:12.5px; letter-spacing:2px; }
  /* ---------- 控制区 ---------- */
  .controls{ display:flex; flex-direction:column; align-items:center; gap:10px; width:min(92vw,880px); }
  .btn-row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; }
  button{ font-family:inherit; cursor:pointer; }
  #windBtn{
    font-size:20px; letter-spacing:3px; color:#fff7e6; padding:13p.........完整代码请登录后点击上方下载按钮下载查看