鹈鹕骑车记 · 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
simple.c 08-15 09:362楼
Fri1368 08-15 09:404楼
Tibo Sottiaux 08-15 09:476楼
空崎日奈 08-15 10:208楼