svg鹦鹉骑自行车动画代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由deepseek-4.1 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,viewport-fit=cover">
<title>鹈鹕骑行 · PELICAN RIDER</title>
<style>
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{
    margin:0;
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
    color:#eaf1f8;
    overflow:hidden;
    background:
      radial-gradient(1200px 780px at 12% -12%, var(--page-glow1,#1e5f8a), transparent 62%),
      radial-gradient(1050px 760px at 104% 112%, var(--page-glow2,#3b8fbf), transparent 58%),
      linear-gradient(165deg, var(--page-c1,#0b2740), var(--page-c2,#071a2b));
    transition:background .5s ease;
  }
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
    background-image:
      radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
      radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px);
    background-size:3px 3px,4px 4px;
    background-position:0 0,1px 1px;
    opacity:.75;
  }

  .app{
    position:relative;z-index:2;
    display:grid;
    grid-template-columns:1fr 352px;
    grid-template-rows:auto 1fr;
    height:100vh;height:100dvh;
  }

  header{
    grid-column:1;grid-row:1;
    padding:18px 26px 6px;
    display:flex;flex-direction:column;gap:4px;
  }
  header h1{
    margin:0;
    font-size:clamp(18px,2.3vw,28px);
    letter-spacing:.06em;
    font-weight:800;
    background:linear-gradient(92deg,#ffffff,var(--accent,#2f9bd6) 55%,var(--accent2,#59c2b5));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 2px 12px rgba(0,0,0,.35));
  }
  header p{
    margin:0;font-size:12.5px;letter-spacing:.22em;
    color:rgba(226,240,252,.62);text-transform:uppercase;
  }

  .stage{
    grid-column:1;grid-row:2;
    position:relative;
    display:flex;align-items:center;justify-content:center;
    min-height:0;overflow:hidden;
    padding:4px 10px 18px;
  }
  #art{
    width:100%;height:100%;
    display:block;
    transform-origin:center center;
    transition:transform .18s ease-out;
    filter:drop-shadow(0 26px 42px rgba(0,0,0,.32));
  }

  /* ---------- panel ---------- */
  .panel{
    grid-column:2;grid-row:1 / span 2;
    min-height:0;
    padding:16px 16px 26px;
    overflow-y:auto;
    display:flex;flex-direction:column;gap:13px;
    background:rgba(9,15,26,.72);
    border-left:1px solid color-mix(in srgb, var(--accent,#2f9bd6) 45%, transparent);
    backdrop-filter:blur(14px) saturate(1.2);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);
    box-shadow:-18px 0 44px rgba(0,0,0,.35) inset;
  }
  .panel::-webkit-scrollbar{width:10px}
  .panel::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:6px}
  .panel::-webkit-scrollbar-thumb{
    background:var(--accent,#2f9bd6);
    border-radius:6px;border:2px solid transparent;background-clip:content-box;
  }
  .panel{scrollbar-width:thin;scrollbar-color:var(--accent,#2f9bd6) rgba(255,255,255,.05)}

  .panel-head{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding-bottom:8px;
    border-bottom:1px dashed color-mix(in srgb, var(--accent,#2f9bd6) 40%, transparent);
  }
  .panel-head h2{
    margin:0;font-size:13px;letter-spacing:.16em;font-weight:700;
    color:color-mix(in srgb, var(--accent2,#59c2b5) 82%, white);
  }

  .field{display:flex;flex-direction:column;gap:6px}
  .field .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .field label{
    font-size:12.5px;font-weight:600;letter-spacing:.03em;
    color:rgba(226,240,252,.86);
  }
  .field .val{
    font-size:11.5px;font-variant-numeric:tabular-nums;
    color:color-mix(in srgb, var(--accent2,#59c2b5) 88%, white);
    background:rgba(255,255,255,.07);
    padding:1px 8px;border-radius:99px;
  }

  input[type=color]{
    -webkit-appearance:none;appearance:none;
    width:100%;height:34px;padding:0;border:none;background:transparent;cursor:pointer;
  }
  input[type=color]::-webkit-color-swatch-wrapper{padding:0}
  input[type=color]::-webkit-color-swatch{
    border:2px solid rgba(255,255,255,.28);border-radius:10px;
  }
  input[type=color]::-moz-color-swatch{
    border:2px solid rgba(255,255,255,.28);border-radius:10px;
  }

  input[type=range]{
    -webkit-appearance:none;appearance:none;
    width:100%;height:7px;border-radius:99px;outline:none;cursor:pointer;
    background:linear-gradient(90deg,var(--accent,#2f9bd6),var(--accent2,#59c2b5));
    box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:20px;height:20px;border-radius:50%;
    background:#fff;border:3px solid var(--accent,#2f9bd6);
    box-shadow:0 2px 8px rgba(0,0,0,.45);
    transition:transform .12s ease;
  }
  input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.14)}
  input[type=range]::-webkit-slider-thumb:active{transform:scale(1.02)}
  input[type=range]::-moz-range-thumb{
    width:16px;height:16.........完整代码请登录后点击上方下载按钮下载查看