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

代码语言：html

所属分类：其他

代码由glm-5.3-flash 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">
<title>鹈鹕骑行 · PELICAN RIDER</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scrollbar-color: var(--accent, #2FA98C) transparent; }
  body {
    --accent: #2FA98C; --accent2: #1F8168;
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    min-height: 100dvh; overflow-x: hidden;
    transition: background .5s ease;
  }
  /* ---------- 页面主题（多层渐变背景） ---------- */
  body[data-theme="day"] {
    --pbg: radial-gradient(1200px 600px at 82% -8%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
           radial-gradient(900px 500px at 12% 8%, rgba(120,200,235,.35), rgba(120,200,235,0) 65%),
           linear-gradient(175deg, #C9E8F7 0%, #E9F7FF 48%, #F7FBF4 100%);
    --panel: rgba(255,255,255,.72); --panel-bd: #C2DCEA;
    --ptext: #22303C; --pmuted: #5B7284; --chip: rgba(47,169,140,.13);
    --accent: #2FA98C; --accent2: #1F8168; --track: rgba(47,169,140,.25);
  }
  body[data-theme="dusk"] {
    --pbg: radial-gradient(1000px 520px at 80% 0%, rgba(255,196,120,.42), rgba(255,196,120,0) 62%),
           radial-gradient(800px 480px at 8% 90%, rgba(120,70,130,.5), rgba(120,70,130,0) 60%),
           linear-gradient(178deg, #2E2547 0%, #6E4468 52%, #C86A54 88%, #E8935C 100%);
    --panel: rgba(42,30,58,.66); --panel-bd: rgba(255,205,170,.32);
    --ptext: #FFE9D6; --pmuted: #D9A88F; --chip: rgba(242,163,92,.2);
    --accent: #F2A35C; --accent2: #D97B3B; --track: rgba(242,163,92,.3);
  }
  body[data-theme="night"] {
    --pbg: radial-gradient(1100px 560px at 78% 6%, rgba(110,150,220,.22), rgba(110,150,220,0) 60%),
           radial-gradient(700px 420px at 14% 92%, rgba(60,90,160,.4), rgba(60,90,160,0) 62%),
           linear-gradient(178deg, #0A1226 0%, #14203C 55%, #1F3054 100%);
    --panel: rgba(16,26,50,.74); --panel-bd: rgba(140,180,240,.28);
    --ptext: #D9E4F5; --pmuted: #8FA3C6; --chip: rgba(111,183,217,.18);
    --accent: #6FB7D9; --accent2: #4A8FB8; --track: rgba(111,183,217,.3);
  }
  body[data-theme="plain"] {
    --pbg: radial-gradient(900px 480px at 50% 12%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
           linear-gradient(180deg, #F6F1E7 0%, #EFE7D8 100%);
    --panel: rgba(255,253,246,.85); --panel-bd: #DCD0BA;
    --ptext: #3A332B; --pmuted: #8A7A62; --chip: rgba(47,169,140,.12);
    --accent: #2FA98C; --accent2: #1F8168; --track: rgba(47,169,140,.25);
  }
  body { background: var(--pbg); background-attachment: fixed; color: var(--ptext); }
  /* 细颗粒层次 */
  body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40;
    background-image:
      radial-gradient(rgba(0,0,0,.5) .6px, transparent 1.1px),
      radial-gradient(rgba(255,255,255,.5) .5px, transparent 1px);
    background-size: 3px 3px, 5px 5px; background-position: 0 0, 2px 3px;
    opacity: .05; mix-blend-mode: overlay;
  }
  /* ---------- 头部 ---------- */
  header {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 24px; height: 78px;
  }
  h1 { font-size: clamp(19px, 2.6vw, 28px); font-weight: 900; letter-spacing: .07em; white-space: nowrap; }
  h1 .en { color: var(--accent); }
  .sub { font-size: 12px; color: var(--pmuted); letter-spacing: .18em; margin-top: 3px; }
  .actions { display: flex; gap: 8px; flex-shrink: 0; }
  /* ---------- 按钮（语义色） ---------- */
  .btn {
    border: none; cursor: pointer; color: #fff; font-weight: 700; font-family: inherit;
    padding: 9px 16px; border-radius: 12px; font-size: 13.5px; letter-spacing: .05em;
    transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
    box-shadow: 0 3px 10px rgba(20,30,40,.18);
  }
  .btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
  .btn:active { transform: scale(.95); }
  .btn.primary { background: linear-gradient(150deg, var(--accent), var(--accent2)); }
  .btn.success { background: linear-gradient(150deg, #47AE7C, #2E8558); }
  .btn.warning { background: linear-gradient(150deg, #EFAC48, #D4872B); }
  .btn.danger  { background: linear-gradient(150deg, #E06856, #C24A3A); }
  /* ---------- 舞台 ---------- */
  #stage {
    position: relative; margin-right: 352px; height: calc(100dvh - 78px);
    display: flex; align-items: center; justify-content: center; padding: 4px 14px 10px;
    overflow: hidden;
  }
  #zoomWrap { width: 100%; height: 100%; transition: transform .3s ease; will-change: transform; }
  #art { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 42px rgba(15,25,40,.2)); }
  /* ---------- 控制面板 ---------- */
  #panel {
    position: fixed; right: 16px; top: 88px; bottom: 16px; width: 320px; z-index: 30;
    border-radius: 18px; background: var(--panel); border: 1px solid var(--panel-bd);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    overflow-y: auto; padding: 16px 16px 14px; color: var(--ptext);
    box-shadow: 0 12px 34px rgba(15,25,45,.2);
    scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
  }
  #panel::-webkit-scrollbar { width: 10px; }
  #panel::-webkit-scrollbar-track { background: transparent; }
  #panel::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--accent), var(--accent2));
    border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
  }
  #panel h2 { font-size: 14px; letter-spacing: .22em; color: var(--ptext); display: flex; align-items: center; gap: 8px; }
  #panel h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
  .sec { margin: 13px 0 0; }
  .sec > h3 { font-size: 11px; color: var(--pmuted); letter-spacing: .2em; margin-bottom: 7px; font-weight: 700; }
  .swrow { display: flex; gap: 7px; flex-wrap: wrap; }
  .swatch {
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
    border: 2px solid rgba(0,0,0,.14); transition: transform .15s ease, outline-color .15s;
    outline: 2.5px solid transparent; outline-offset: 2px;
  }
  .swatch:hover { transform: scale(1.12); }
  .swatch:active { transform: scale(.92); }
  .swatch.active { outline-color: var(--accent); transform: scale(1.06); }
  ..........完整代码请登录后点击上方下载按钮下载查看