• 菜问👀

    鹈鹕骑车记 · Pelican's Joyride

    :root {
    --sky-top: #70c4ff;
    --sky-bottom: #daf0ff;
    --ocean-deep: #2b7bb9;
    --ocean-light: #52a8e8;
    --sand: #fde8b3;
    --road: #3d4451;
    --road-line: #f1c40f;
    --pelican-white: #f8fafc;
    --pelican-grey: #cbd5e1;
    --pelican-beak: #ff9f1c;
    --pelican-pouch: #ffb703;
    --pouch-stretch: #ffa200;
    --bike-frame: #06d6a0;
    --bike-metal: #94a3b8;
    --bike-tire: #1e293b;
    --accent-coral: #ff5964;
    }```
    body.sunset-mode {
    --sky-top: #2c1654;
    --sky-bottom: #ff7e5f;
    --ocean-deep: #432371;
    --ocean-light: #7b387d;
    --sand: #d48b70;
    --road: #282738;
    --road-line: #feb47b;
    }

    body.night-mode {
    --sky-top: #0a0e1a;
    --sky-bottom: #1a2639;
    --ocean-deep: #0f1c2e;
    --ocean-light: #183153;
    --sand: #475569;
    --road: #131722;
    --road-line: #38bdf8;
    }

    • {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    }

    body {
    font-family: 'Fredoka', 'Noto Sans SC', sans-serif;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 65%);
    transition: background 1.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    }

    / 顶部仪表盘与标题 /
    header {
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    z-index: 50;
    pointer-events: none;
    }

    .brand-container {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10px 22px;
    border-radius: 999px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    }

    .brand-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.5px;
    }

    body.night-mode .brand-title,
    body.sunset-mode .brand-title {
    color: #f8fafc;
    }

    .brand-tag {
    font-size: 11px;
    font-weight: 700;
    background: var(--accent-coral);
    color: #fff;
    padding: 3px 10px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: tagPulse 2s infinite ease-in-out;
    }

    @keyframes tagPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
    }

    .dashboard {
    display: flex;
    gap: 16px;
    pointer-events: auto;
    }

    .stat-pill {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10px 18px;
    border-radius: 18px;
    color: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 95px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    }

    body.night-mode .stat-pill,
    body.sunset-mode .stat-pill {
    color: #f8fafc;
    }

    .stat-label {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.8;
    text-transform: uppercase;
    }

    .stat-val {
    font-size: 20px;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    }

    / 场景舞台 /
    #world-stage {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    }

    / 太阳与月亮 /
    .celestial-body {
    position: absolute;
    top: 60px;
    right: 12%;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7ad 20%, #ffd13b 85%);
    box-shadow: 0 0 60px rgba(255, 209, 59, 0.6);
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
    }

    body.sunset-mode .celestial-body {
    top: 140px;
    background: radial-gradient(circle, #ffeedd 10%, #ff5252 80%);
    box-shadow: 0 0 80px rgba(255, 82, 82, 0.8);
    transform: scale(1.15);
    }

    body.night-mode .celestial-body {
    top: 70px;
    background: radial-gradient(circle, #ffffff 40%, #e2e8f0 100%);
    box-shadow: 0 0 45px rgba(255, 255, 255, 0.8), inset -10px -8px 0px rgba(0,0,0,0.08);
    transform: scale(0.85);
    }

    / 背景视差层 /
    .parallax-layer {
    position: absolute;
    width: 200%;
    left: 0;
    top: 0;
    height: 100%;
    pointer-events: none;
    }

    / 云朵层 /
    .clouds-layer {
    z-index: 2;
    animation: driftClouds 45s linear infinite;
    }

    @keyframes driftClouds {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
    }

    / 远山层 /
    .mountains-layer {
    z-index: 3;
    bottom: 180px;
    top: auto;
    height: 220px;
    animation: scrollParallax 28s linear infinite;
    }

    / 大海与波浪 /
    .ocean-layer {
    z-index: 4;
    position: absolute;
    bottom: 120px;
    width: 200%;
    height: 90px;
    background: linear-gradient(180deg, var(--ocean-light) 0%, var(--ocean-deep) 100%);
    animation: scrollParallax 14s linear infinite;
    clip-path: polygon(0 25%, 5% 20%, 10% 25%, 15% 20%, 20% 25%, 25% 20%, 30% 25%, 35% 20%, 40% 25%, 45% 20%, 50% 25%, 55% 20%, 60% 25%, 65% 20%, 70% 25%, 75% 20%, 80% 25%, 85% 20%, 90% 25%, 95% 20%, 100% 25%, 100% 100%, 0 100%);
    }

    / 近景海岸/绿丘 /
    .hills-layer {
    z-index: 5;
    position: absolute;
    bottom: 80px;
    width: 200%;
    height: 130px;
    animation: scrollParallax 9s linear infinite;
    }

    / 道路 /
    .road-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 110px;
    background: var(--road);
    z-index: 10;
    border-top: 6px solid #4a5568;
    box-shadow: inset 0 8px 12px rgba(0,0,0,0.3);
    }

    .road-stripes {
    position: absolute;
    top: 42%;
    width: 200%;
    height: 8px;
    background: repeating-linear-gradient(
    90deg,
    var(--road-line) 0px,
    var(--road-line) 45px,
    transparent 45px,
    transparent 90px
    );
    animation: roadMove 0.8s linear infinite;
    }

    @keyframes roadMove {
    from { transform: translateX(0); }
    to { transform: translateX(-90px); }
    }

    @keyframes scrollParallax {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
    }

    / 角色骑行主体容器 /
    .pelican-rider {
    position: absolute;
    bottom: 75px;
    left: 24%;
    width: 280px;
    height: 280px;
    z-index: 20;
    transform-origin: bottom center;
    transition: transform 0.2s ease;
    }

    .pelican-rider.boosting {
    transform: skewX(-5deg) scale(1.02);
    }

    / 鹈鹕与自行车的微动态 /
    .bike-chassis {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: bikeBounce 0.4s ease-in-out infinite alternate;
    }

    @keyframes bikeBounce {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-3.5px) rotate(0.4deg); }
    }

    / 轮子旋转 /
    .wheel {
    transform-origin: center;
    animation: spinWheel 0.6s linear infinite;
    }

    @keyframes spinWheel {
    100% { transform: rotate(360deg); }
    }

    / 踏板与曲柄旋转 /
    .crank-assembly {
    transform-origin: 130px 225px;
    animation: spinCrank 0.6s linear infinite;
    }

    @keyframes spinCrank {
    100% { transform: rotate(360deg); }
    }

    / 鹈鹕身体摇摆 /
    .pelican-body-group {
    transform-origin: 125px 170px;
    animation: pelicanBob 0.6s ease-in-out infinite alternate;
    }

    @keyframes pelicanBob {
    0% { transform: translateY(0) rotate(-1.5deg); }
    100% { transform: translateY(-5px) rotate(2deg); }
    }

    / 围巾随风飘舞 /
    .scarf-tail {
    transform-origin: 145px 128px;
    animation: flutterScarf 0.25s ease-in-out infinite alternate;
    }

    @keyframes flutterScarf {
    0% { transform: rotate(-4deg) skewX(2deg); }
    100% { transform: rotate(8deg) skewX(-4deg); }
    }

    / 嘴巴喉囊大张 (状态机动画) /
    .pouch-normal {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .beak-open .upper-beak {
    transform: rotate(-15deg);
    transform-origin: 175px 110px;
    }

    .beak-open .lower-beak {
    transform: rotate(18deg) scaleY(1.4);
    transform-origin: 175px 125px;
    }

    .beak-open .pouch-fill {
    transform: scale(1.35) translateY(4px);
    transform-origin: 200px 140px;
    fill: #ff8500 !important;
    }

    / 飞鱼产生与拾取 /
    .item-fish {
    position: absolute;
    width: 44px;
    height: 44px;
    z-index: 15;
    pointer-events: none;
    animation: fishFloat 1.2s ease-in-out infinite alternate;
    }

    @keyframes fishFloat {
    0% { transform: translateY(-8px) rotate(-6deg); }
    100% { transform: translateY(8px) rotate(8deg); }
    }

    / 速度线/气流特效 /
    .speed-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 99px;
    height: 3px;
    z-index: 18;
    pointer-events: none;
    animation: streamLine 0.4s linear infinite;
    }

    @keyframes streamLine {
    0% { transform: translateX(100vw); width: 40px; opacity: 0; }
    40% { opacity: 0.9; width: 140px; }
    100% { transform: translateX(-200px); width: 60px; opacity: 0; }
    }

    / 底部控制栏 /
    .controls-panel {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    gap: 12px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 10px 16px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
    }

    .btn {
    appearance: none;
    border: none;
    outline: none;
    cursor: pointer;
    background: #ffffff;
    color: #1e293b;
    font-family: 'Fredoka', 'Noto Sans SC', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    }

    .btn:active {
    transform: translateY(1px) scale(0.97);
    }

    .btn-boost {
    background: linear-gradient(135deg, #ff9f1c 0%, #ff5964 100%);
    color: #ffffff;
    }

    .btn-gulp {
    background: linear-gradient(135deg, #06d6a0 0%, #118ab2 100%);
    color: #ffffff;
    }

    .btn-bell {
    background: linear-gradient(135deg, #ffd166 0%, #ff9f1c 100%);
    color: #593100;
    }

    .btn-mode {
    background: #1e293b;
    color: #ffffff;
    }

    .btn-kbd {
    font-size: 10px;
    background: rgba(0,0,0,0.15);
    padding: 2px 6px;
    border-radius: 6px;
    opacity: 0.85;
    }

    / 悬浮叮叮提示冒泡 /
    .ding-bubble {
    position: absolute;
    top: -30px;
    left: 170px;
    font-weight: 800;
    color: #ff9f1c;
    font-size: 20px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
    pointer-events: none;
    animation: dingPop 0.8s ease-out forwards;
    }

    @keyframes dingPop {
    0% { opacity: 0; transform: translateY(10px) scale(0.5); }
    30% { opacity: 1; transform: translateY(-10px) scale(1.2); }
    100% { opacity: 0; transform: translateY(-35px) scale(1.4); }
    }

    / 飘落小鱼粒子动画 /
    .catch-particle {
    position: absolute;
    pointer-events: none;
    font-size: 18px;
    font-weight: 700;
    color: #06d6a0;
    animation: particleFly 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    z-index: 30;
    text-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    @keyframes particleFly {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(30px, -60px) scale(1.5); }
    }
    ```🚲
    醍醐 / 鹈鹕骑单车
    PELICAN GO!```
    <div class="dashboard">
    <div class="stat-pill">
    <span class="stat-label">捕鱼数 FISH</span>
    <span class="stat-val" id="fish-count">0</span>
    </div>
    <div class="stat-pill">
    <span class="stat-label">时速 SPEED</span>
    <span class="stat-val"><span id="speed-val">22</span> <small style="font-size:12px;font-weight:600;">km/h</small></span>
    </div>
    <div class="stat-pill">
    <span class="stat-label">里程 DISTANCE</span>
    <span class="stat-val"><span id="dist-val">0.0</span> <small style="font-size:12px;font-weight:600;">km</small></span>
    </div>
    </div>
    ``````
    <!-- 太阳/月亮 -->
    <div class="celestial-body" id="celestial"></div>

    <!-- 云朵视差层 -->
    <div class="parallax-layer clouds-layer">
    <svg width="200%" height="100%" viewBox="0 0 2800 500" fill="none" preserveAspectRatio="none">
    <g fill="rgba(255, 255, 255, 0.65)">
    <path d="M120 180 Q150 130 210 140 Q260 110 320 140 Q380 120 420 170 Q450 200 410 230 L130 230 Q100 210 120 180 Z" />
    <path d="M620 120 Q650 80 700 90 Q740 60 800 85 Q850 70 890 110 Q910 140 880 170 L630 170 Q600 150 620 120 Z" />
    <path d="M1100 210 Q1140 160 1200 170 Q1260 140 1320 170 Q1380 150 1410 200 Q1430 240 1390 260 L1110 260 Q1080 240 1100 210 Z" />
    <!-- 循环第二段 -->
    <path d="M1520 180 Q1550 130 1610 140 Q1660 110 1720 140 Q1780 120 1820 170 Q1850 200 1810 230 L1530 230 Q1500 210 1520 180 Z" />
    <path d="M2020 120 Q2050 80 2100 90 Q2140 60 2200 85 Q2250 70 2290 110 Q2310 140 2280 170 L2030 170 Q2000 150 2020 120 Z" />
    <path d="M2500 210 Q2540 160 2600 170 Q2660 140 2720 170 Q2780 150 2810 200 Q2830 240 2790 260 L2510 260 Q2480 240 2500 210 Z" />
    </g>
    </svg>
    </div>

    <!-- 远山视差层 -->
    <div class="parallax-layer mountains-layer">
    <svg width="200%" height="100%" viewBox="0 0 2800 300" fill="none" preserveAspectRatio="none">
    <path d="M0 300 L0 180 Q200 60 420 190 Q650 40 900 210 Q1100 100 1400 220 L1400 300 Z M1400 300 L1400 180 Q1600 60 1820 190 Q2050 40 2300 210 Q2500 100 2800 220 L2800 300 Z" fill="#4fa3a5" opacity="0.45" />
    <path d="M0 300 L0 210 Q280 110 560 230 Q800 130 1100 240 Q1300 150 1400 250 L1400 300 Z M1400 300 L1400 210 Q1680 110 1960 230 Q2200 130 2500 240 Q2700 150 2800 250 L2800 300 Z" fill="#388087" opacity="0.6" />
    </svg>
    </div>

    <!-- 大海与波浪 -->
    <div class="ocean-layer"></div>

    <!-- 近景绿丘与椰子树 -->
    <div class="hills-layer">
    <svg width="200%" height="100%" viewBox="0 0 2800 160" fill="none" preserveAspectRatio="none">
    <path d="M0 160 Q200 40 500 110 Q800 30 1150 120 Q1350 70 1400 130 L1400 160 Z M1400 160 Q1600 40 1900 110 Q2200 30 2550 120 Q2750 70 2800 130 L2800 160 Z" fill="#6ba368" />
    <path d="M0 160 Q350 80 700 140 Q1050 75 1400 145 L1400 160 Z M1400 160 Q1750 80 2100 140 Q2450 75 2800 145 L2800 160 Z" fill="#4d8b52" />
    <!-- 小花与灌木丛 -->
    <circle cx="280" cy="110" r="14" fill="#ff70a6" />
    <circle cx="750" cy="95" r="12" fill="#ffd166" />
    <circle cx="1200" cy="115" r="15" fill="#ff9f1c" />
    <circle cx="1680" cy="110" r="14" fill="#ff70a6" />
    <circle cx="2150" cy="95" r="12" fill="#ffd166" />
    <circle cx="2600" cy="115" r="15" fill="#ff9f1c" />
    </svg>
    </div>

    <!-- 道路 -->
    <div class="road-container">
    <div class="road-stripes" id="road-stripes"></div>
    </div>

    <!-- 飞鱼群生成容器 -->
    <div id="fish-spawner"></div>
    <!-- 气流速度线生成容器 -->
    <div id="speedline-container"></div>

    <!-- 鹈鹕骑行主角 SVG -->
    <div class="pelican-rider" id="pelican-rider">
    <div class="bike-chassis" id="bike-chassis">
    <svg viewBox="0 0 320 300" width="320" height="300" style="overflow: visible;">
    <defs>
    <linearGradient id="beakGrad" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#ffb703" />
    <stop offset="100%" stop-color="#fb8500" />
    </linearGradient>
    <linearGradient id="pouchGrad" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#ffa200" />
    <stop offset="100%" stop-color="#e85d04" />
    </linearGradient>
    <linearGradient id="frameGrad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#06d6a0" />
    <stop offset="100%" stop-color="#1b9aaa" />
    </linearGradient>
    <filter id="shadow" x="-10%" y="-10%" width="120%" height="130%">
    <feDropShadow dx="0" dy="8" stdDeviation="4" flood-opacity="0.25"/>
    </filter>
    </defs>

    <!-- 车轮阴影 -->
    <ellipse cx="65" cy="275" rx="35" ry="7" fill="rgba(0,0,0,0.3)" />
    <ellipse cx="235" cy="275" rx="35" ry="7" fill="rgba(0,0,0,0.3)" />

    <!-- ================= 后轮 ================= -->
    <g transform="translate(65, 230)">
    <g class="wheel" id="wheel-back">
    <!-- 轮胎 -->
    <circle cx="0" cy="0" r="42" fill="none" stroke="#1e293b" stroke-width="9" />
    <circle cx="0" cy="0" r="38" fill="none" stroke="#e2e8f0" stroke-width="2.5" />
    <!-- 轮辐 (8根辐条) -->
    <line x1="-37" y1="0" x2="37" y2="0" stroke="#94a3b8" stroke-width="1.8" />
    <line x1="0" y1="-37" x2="0" y2="37" stroke="#94a3b8" stroke-width="1.8" />
    <line x1="-26" y1="-26" x2="26" y2="26" stroke="#94a3b8" stroke-width="1.8" />
    <line x1="-26" y1="26" x2="26" y2="-26" stroke="#94a3b8" stroke-width="1.8" />
    <circle cx="0" cy="0" r="7" fill="#64748b" />
    </g>
    </g>

    <!-- ================= 前轮 ================= -->
    <g transform="translate(235, 230)">
    <g class="wheel" id="wheel-front">
    <!-- 轮胎 -->
    <circle cx="0" cy="0" r="42" fill="none" stroke="#1e293b" stroke-width="9" />
    <circle cx="0" cy="0" r="38" fill="none" stroke="#e2e8f0" stroke-width="2.5" />
    <!-- 轮辐 -->
    <line x1="-37" y1="0" x2="37" y2="0" stroke="#94a3b8" stroke-width="1.8" />
    <line x1="0" y1="-37" x2="0" y2="37" stroke="#94a3b8" stroke-width="1.8" />
    <line x1="-26" y1="-26" x2="26" y2="26" stroke="#94a3b8" stroke-width="1.8" />
    <line x1="-26" y1="26" x2="26" y2="-26" stroke="#94a3b8" stroke-width="1.8" />
    <circle cx="0" cy="0" r="7" fill="#64748b" />
    </g>
    </g>

    <!-- ================= 自行车车架 ================= -->
    <g stroke="url(#frameGrad)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
    <!-- 后叉 & 平叉 -->
    <line x1="65" y1="230" x2="115" y2="175" />
    <line x1="65" y1="230" x2="135" y2="230" />
    <!-- 中管与立管 -->
    <line x1="115" y1="175" x2="135" y2="230" />
    <!-- 主大梁与下管 -->
    <line x1="115" y1="175" x2="200" y2="170" />
    <line x1="135" y1="230" x2="200" y2="170" />
    <!-- 前叉 -->
    <line x1="200" y1="170" x2="235" y2="230" stroke="#06d6a0" />
    </g>

    <!-- 车把立管与弯把 -->
    <path d="M200 170 L195 135 Q195 120 215 120 L225 125" fill="none" stroke="#475569" stroke-width="5" stroke-linecap="round" />
    <!-- 车铃铛 -->
    <circle cx="215" cy="116" r="6" fill="#ffd166" stroke="#b45309" stroke-width="1.5" id="bike-bell-btn" style="cursor:pointer;" />
    <ellipse cx="213" cy="114" rx="2" ry="1.5" fill="#ffffff" />

    <!-- 车座 (鞍座) -->
    <path d="M100 172 Q115 162 135 170 Q130 178 110 177 Z" fill="#78350f" />

    <!-- 前车筐 (装小鱼/零食) -->
    <g transform="translate(210, 135)">
    <rect x="0" y="0" width="32" height="24" rx="4" fill="#d97706" opacity="0.8" />
    <line x1="8" y1="0" x2="8" y2="24" stroke="#92400e" stroke-width="1.5" />
    <line x1="16" y1="0" x2="16" y2="24" stroke="#92400e" stroke-width="1.5" />
    <line x1="24" y1="0" x2="24" y2="24" stroke="#92400e" stroke-width="1.5" />
    <line x1="0" y1="8" x2="32" y2="8" stroke="#92400e" stroke-width="1.5" />
    <line x1="0" y1="16" x2="32" y2="16" stroke="#92400e" stroke-width="1.5" />
    <!-- 筐里探头探脑的小鱼 -->
    <path d="M14 6 Q20 -4 28 2 Q22 10 16 8 Z" fill="#38bdf8" />
    <circle cx="24" cy="2" r="1.5" fill="#000" />
    </g>

    <!-- ================= 醍醐/鹈鹕主角 ================= -->
    <g class="pelican-body-group" id="pelican-body">

    <!-- 尾羽 -->
    <path d="M85 160 Q70 155 60 170 Q75 178 95 170 Z" fill="#e2e8f0" />

    <!-- 丰满雪白的身体 -->
    <path d="M90 165 Q95 130 125 130 Q145 130 150 155 Q150 185 125 190 Q95 190 90 165 Z" fill="var(--pelican-white)" filter="url(#shadow)" />
    <!-- 身体阴影质感 -->
    <path d="M100 178 Q125 190 145 175 Q135 188 115 188 Z" fill="#cbd5e1" />

    <!-- 翅膀 (放于身体侧面,迎风微展) -->
    <g id="pelican-wing">
    <path d="M110 145 Q135 135 155 155 Q130 170 108 158 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.5" />
    <!-- 翅尖深灰色羽毛 -->
    <path d="M135 150 Q155 155 145 166 Q130 165 125 155 Z" fill="#64748b" />
    </g>

    <!-- 飘逸的围巾 (珊瑚红) -->
    <g>
    <rect x="138" y="116" width="18" height="12" rx="5" fill="var(--accent-coral)" />
    <!-- 围巾飘带 -->
    <path class="scarf-tail" d="M145 124 Q125 130 100 120 Q120 140 142 132 Z" fill="var(--accent-coral)" />
    <path class="scarf-tail" d="M146 126 Q130 140 110 138 Q130 152 144 135 Z" fill="#e63946" opacity="0.8" />
    </g>

    <!-- 优雅 S 型长脖子与头部 -->
    <path d="M135 140 Q130 110 148 95 Q160 85 175 90 Q180 105 165 120 Q150 135 142 145 Z" fill="var(--pelican-white)" />

    <!-- 头部 -->
    <circle cx="170" cy="95" r="16" fill="var(--pelican-white)" />

    <!-- 呆萌的大眼睛 -->
    <circle cx="175" cy="92" r="5" fill="#ffffff" stroke="#334155" stroke-width="1.2" />
    <circle cx="176" cy="92" r="2.6" fill="#0f172a" id="pelican-pupil" />
    <circle cx="178" cy="90.5" r="1" fill="#ffffff" /> <!-- 高光 -->

    <!-- 复古骑行小遮阳帽 -->
    <path d="M160 86 Q172 75 186 86 Q194 85 198 90 L160 88 Z" fill="#06d6a0" />
    <circle cx="174" cy="79" r="3" fill="#ffd166" />

    <!-- ================= 标志性超级大鸟嘴 & 喉囊 ================= -->
    <g id="pelican-beak-group">

    <!-- 标志性大喉囊 (Pouch) - 重点弹性渲染 -->
    <path class="pouch-normal pouch-fill" id="pouch-mesh"
    d="M170 108 Q185 135 220 125 Q250 115 260 105 Q220 112 175 106 Z"
    fill="url(#pouchGrad)" stroke="#ea580c" stroke-width="1.2" />

    <!-- 下喙支架骨 -->
    <path class="lower-beak" d="M172 106 L265 104 Q255 110 215 112 Z" fill="#f59e0b" />

    <!-- 上喙 (坚硬修长,带钩) -->
    <path class="upper-beak" d="M168 96 L268 98 Q274 100 270 105 L260 105 Q210 100 170 102 Z" fill="url(#beakGrad)" stroke="#d97706" stroke-width="1" />
    <!-- 喙钩 -->
    <path d="M268 98 Q274 102 268 107 Q264 104 268 98 Z" fill="#b45309" />
    <!-- 鼻孔小点 -->
    <circle cx="185" cy="99" r="1.2" fill="#78350f" />
    </g>

    <!-- 鹈鹕握着车把的小翅膀手/爪 -->
    <path d="M148 140 Q180 135 208 126 Q215 130 205 135 Q180 145 145 148 Z" fill="#f8fafc" stroke="#cbd5e1" stroke-width="1" />
    </g>

    <!-- ================= 蹬自行车的橙色大脚蹼 (连杆机构) ================= -->
    <g>
    <!-- 牙盘齿轮 (位于 135, 230) -->
    <circle cx="135" cy="230" r="14" fill="#475569" stroke="#94a3b8" stroke-width="2" />

    <!-- 曲柄与踏板组件 (旋转) -->
    <g class="crank-assembly" id="crank">
    <!-- 曲柄臂 -->
    <line x1="135" y1="230" x2="155" y2="245" stroke="#94a3b8" stroke-width="4.5" stroke-linecap="round" />
    <!-- 踏板轴 -->
    <rect x="150" y="243" width="12" height="5" rx="2" fill="#1e293b" />
    </g>

    <!-- 腿部与大脚蹼 (跟随运动模拟) -->
    <g id="pelican-leg-left">
    <!-- 大腿与小腿 -->
    <path d="M125 180 Q130 210 156 242" fill="none" stroke="#fb923c" stroke-width="6" stroke-linecap="round" />
    <!-- 萌系大鸭蹼/脚蹼 -->
    <path d="M145 244 Q162 238 170 248 Q155 252 145 244 Z" fill="#ea580c" />
    </g>
    </g>

    </svg>
    </div>
    </div>
    ```⚡ 奋力蹬车
    Space

    🐟 大嘴兜鱼
    G

    🔔 叮叮车铃
    B

    🌅 晨昏风景
    N

    主楼
  • 菜问👀

    html好像上传不了

    图片

    截图各位佬看看吧

    #1
  • simple.c

    我的还是飞轮,可能是在openclaw 里使用?还是CPA问题?

    #2
  • 菜问👀

    哦我也是飞轮 我就用的是agy

    让他直接画一个醍醐骑车 出的结果

    #3
  • Fri1368

    用着怎么样? 不会真是美国豆包吧

    #4
  • 菜问👀

    好像是 不过我就画了一个图 其他的没测 看到更新了今天刚刚用

    #5
  • Tibo_Sottiaux

    竟然还有站起来蹬环节

    图片

    #6
  • 菜问👀

    对还能加速 甚至还有限速60哈哈哈

    #7
  • 空崎日奈

    fe-e1ed058fb5cd.loli-frontend-lab.pages.dev

    Frontend Lab

    我这个也是3.7的,太抽象了

    图片

    #8

发表回复

登录后回复