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

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

代码语言：html

所属分类：其他

代码由claude-5 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{
    --dur: 1.1s; /* 每转一圈的时间，越小越快 */
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:radial-gradient(ellipse at top, #fbe9d0 0%, #e7c9a3 60%, #cba57c 100%);
    font-family:"Georgia","STKaiti","KaiTi",serif;
    color:#4a3320;
    padding:20px;
  }
  h1{
    margin:6px 0 2px;
    font-size:clamp(20px,4vw,32px);
    letter-spacing:2px;
    text-shadow:1px 1px 0 #fff8ec;
  }
  .hint{
    margin:0 0 12px;
    font-size:14px;
    opacity:.75;
  }
  .stage-frame{
    width:min(800px,94vw);
    border:10px solid #6b4a2b;
    border-radius:16px;
    box-shadow:0 10px 24px rgba(0,0,0,.25), inset 0 0 0 4px #d4af37;
    overflow:hidden;
    background:#cfeaf5;
  }
  svg{display:block;width:100%;height:auto;}

  .controls{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:center;
    justify-content:center;
    background:#fff8ec;
    padding:10px 18px;
    border-radius:30px;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
  }
  .controls button{
    border:none;
    background:#c9a24b;
    color:#3a2f10;
    font-weight:bold;
    padding:8px 16px;
    border-radius:20px;
    cursor:pointer;
    transition:transform .15s;
    font-size:14px;
  }
  .controls button:hover{transform:translateY(-2px);}
  .controls button:active{transform:translateY(0);}
  .controls label{
    font-size:14px;
    display:flex;
    align-items:center;
    gap:6px;
  }
  input[type=range]{accent-color:#c9a24b;}

  /* ===== 动画定义 ===== */
  @keyframes spin{ to{ transform:rotate(360deg);} }
  @keyframes spinRev{ to{ transform:rotate(-360deg);} }
  @keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }
  @keyframes shadowPulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(.85);} }
  @keyframes legSwing{ 0%,100%{transform:rotate(-16deg);} 50%{transform:rotate(16deg);} }
  @keyframes earTwitch{ 0%,38%,100%{transform:rotate(0);} 45%,55%{transform:rotate(-14deg);} }
  @keyframes tailWiggle{ 0%,100%{transform:rotate(-8deg);} 50%{transform:rotate(10deg);} }
  @keyframes glintSweep{
    0%,10%{opacity:0; transform:translate(-4px,-2px);}
    18%{opacity:.95;}
    28%,100%{opacity:0; transform:translate(6px,3px);}
  }
  @keyframes scrollLeft{ from{transform:translateX(0).........完整代码请登录后点击上方下载按钮下载查看