也是紧急测试了一下dsp的鹈鹕骑车

dkjsiogu2026-08-13

4996

这是动态的

gif录制的有点问题

Pelican on a Bicycle · 骑自行车的鹈鹕
:root { color-scheme: light; }
\* { margin: 0; box-sizing: border-box; }
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 28px 16px;
background: linear-gradient(180deg, #eaf6fc, #d7ecf5);
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
color: #23434c;
}
h1 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 650; letter-spacing: .5px; }
p.note { font-size: .85rem; opacity: .75; }
.card {
width: min(980px, 100%);
background: #fff;
border-radius: 20px;
padding: 10px;
box-shadow: 0 18px 45px rgba(31, 93, 110, .18);
}
svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.cloud { animation: cloudDrift 60s linear infinite; }
.cloud.c2 { animation-delay: -20s; }
.cloud.c3 { animation-delay: -40s; }
@keyframes cloudDrift {
from { transform: translateX(960px); }
to { transform: translateX(-320px); }
}
#wing {
transform-box: view-box;
transform-origin: 452px 262px;
animation: flap .85s ease-in-out infinite alternate;
}
@keyframes flap {
from { transform: rotate(-7deg); }
to { transform: rotate(12deg); }
}
#pouch {
transform-box: view-box;
transform-origin: 528px 152px;
animation: pouchSway 1.7s ease-in-out infinite alternate;
}
@keyframes pouchSway {
from { transform: rotate(-4deg); }
to { transform: rotate(4deg); }
}
#upperBeak {
transform-box: view-box;
transform-origin: 528px 138px;
animation: beakNibble 2s ease-in-out infinite alternate;
}
@keyframes beakNibble {
from { transform: rotate(0deg); }
to { transform: rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
.cloud, #wing, #pouch, #upperBeak { animation: none; }
}
Pelican on a Bicycle · 骑自行车的鹈鹕
SVG 绘制的鹈鹕骑自行车场景:鹈鹕蹬踏板,车轮转动,翅膀与喉囊轻轻摆动。
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#7ecdf5"/>
<stop offset="1" stop-color="#dff3fd"/>
</linearGradient>
```>
<circle cx="95" cy="92" r="60" fill="#ffd86b" opacity=".22"/>
<circle cx="95" cy="92" r="42" fill="#ffd86b"/>
```>
<ellipse cx="120" cy="20" rx="55" ry="22"/>
<ellipse cx="80" cy="32" rx="40" ry="18"/>
<ellipse cx="166" cy="34" rx="45" ry="16"/>
```>
<ellipse cx="120" cy="20" rx="70" ry="24"/>
<ellipse cx="60" cy="34" rx="45" ry="19"/>
<ellipse cx="185" cy="35" rx="52" ry="17"/>
```>
<ellipse cx="120" cy="20" rx="48" ry="19"/>
<ellipse cx="85" cy="30" rx="36" ry="16"/>
<ellipse cx="160" cy="31" rx="40" ry="15"/>
```>
<path d="M0,470 C90,395 190,405 300,470 Z" fill="#9bd49b"/>
<path d="M560,470 C700,380 820,395 900,470 Z" fill="#8ccb8c"/>
```>
<rect x="0" y="470" width="900" height="90" fill="#67b45f"/>
<rect x="0" y="470" width="900" height="8" fill="#79c56f"/>
<ellipse cx="80" cy="512" rx="26" ry="7" fill="#5aa253"/>
<ellipse cx="780" cy="524" rx="32" ry="8" fill="#5aa253"/>
<g stroke="#3f8f42" stroke-width="3" stroke-linecap="round">
<path d="M150,502 l-6,-14 M150,502 l0,-16 M150,502 l6,-13"/>
<path d="M690,498 l-6,-14 M690,498 l0,-16 M690,498 l6,-13"/>
</g>
<g>
<line x1="178" y1="520" x2="178" y2="506" stroke="#3f8f42" stroke-width="3"/>
<circle cx="178" cy="502" r="5" fill="#ff9bb8"/><circle cx="178" cy="502" r="2" fill="#ffd86b"/>
<line x1="716" y1="516" x2="716" y2="502" stroke="#3f8f42" stroke-width="3"/>
<circle cx="716" cy="498" r="5" fill="#fff"/><circle cx="716" cy="498" r="2" fill="#ffd86b"/>
</g>
```>
<ellipse id="shadow" cx="430" cy="492" rx="160" ry="12" fill="#2f4f2f" opacity=".25"/>
<g id="rearWheel">
<circle cx="280" cy="400" r="85" fill="none" stroke="#2e3038" stroke-width="10"/>
<circle cx="280" cy="400" r="78" fill="none" stroke="#8a909b" stroke-width="3"/>
<circle cx="365" cy="400" r="3" fill="#e8b33c"/>
<circle cx="280" cy="400" r="7" fill="#2e3038"/>
<circle cx="280" cy="400" r="3" fill="#fff"/>
</g>
<g id="frontWheel">
<circle cx="590" cy="400" r="85" fill="none" stroke="#2e3038" stroke-width="10"/>
<circle cx="590" cy="400" r="78" fill="none" stroke="#8a909b" stroke-width="3"/>
<circle cx="675" cy="400" r="3" fill="#e8b33c"/>
<circle cx="590" cy="400" r="7" fill="#2e3038"/>
<circle cx="590" cy="400" r="3" fill="#fff"/>
</g>
<g id="pedalFar" transform="translate(365,380)">
<rect x="-15" y="-6" width="30" height="12" rx="5" fill="#26282f"/>
<ellipse cx="0" cy="-9" rx="10" ry="6.5" fill="#d8891f" stroke="#b56f14" stroke-width="2"/>
</g>
<g id="farLeg" stroke="#d8891f" stroke-width="7" stroke-linecap="round">
<line id="farThigh"/>
<line id="farShin"/>
</g>
<g id="frame" stroke="#1f7a86" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" fill="none">
<path d="M280,400 L405,390"/>
<path d="M280,400 L362,310"/>
<path d="M405,390 L362,310"/>
<path d="M362,310 L510,302"/>
<path d="M405,390 L510,302"/>
<path d="M510,302 C536,324 560,355 590,400"/>
<path d="M510,302 L518,286"/>
<path d="M514,292 C520,268 532,250 546,246"/>
<path d="M360,308 L354,320"/>
</g>
<g id="handlebarBits">
<line x1="543" y1="244" x2="558" y2="241" stroke="#f59b2f" stroke-width="9" stroke-linecap="round"/>
<circle cx="517" cy="266" r="6" fill="#ffd86b" stroke="#d9a520" stroke-width="2"/>
</g>
<rect id="seat" x="330" y="312" width="46" height="12" rx="6" fill="#2e3038" transform="rotate(-8 353 318)"/>
<g id="drivetrain" stroke="#6a7078" stroke-width="2.5" fill="none">
<line x1="280" y1="390" x2="405" y2="376"/>
<line x1="280" y1="410" x2="405" y2="404"/>
<circle cx="280" cy="400" r="9" stroke-width="4"/>
</g>
<g id="body">
<g id="tail" fill="#f0ebde" stroke="#d9d3c4" stroke-width="2">
<path d="M315,275 C280,280 262,300 268,318 C290,314 308,300 318,288 Z"/>
<path d="M312,282 C286,286 272,300 276,314 C292,310 304,300 312,290 Z"/>
</g>
<path id="neckOutline" d="M458,232 C476,198 470,170 500,146" fill="none" stroke="#d9d3c4" stroke-width="39" stroke-linecap="round"/>
<path id="neck" d="M458,232 C476,198 470,170 500,146" fill="none" stroke="#fdfbf3" stroke-width="33" stroke-linecap="round"/>
<ellipse cx="395" cy="252" rx="95" ry="58" fill="#fdfbf3" stroke="#d9d3c4" stroke-width="2"/>
<ellipse cx="395" cy="276" rx="72" ry="34" fill="#f0ebde"/>
<g id="wing">
<path d="M452,262 C472,238 498,240 506,256 C514,272 506,280 492,286 C478,298 458,304 448,292 C440,278 444,270 452,262 Z" fill="#ede8db" stroke="#d9d3c4" stroke-width="2"/>
<path d="M456,268 C472,252 490,254 496,264" fill="none" stroke="#d9d3c4" stroke-width="2"/>
<path d="M452,276 C466,266 482,268 490,276" fill="none" stroke="#d9d3c4" stroke-width="2"/>
</g>
<g id="head">
<g stroke="#d8d2c2" stroke-width="3" stroke-linecap="round">
<path d="M493,122 L479,109"/><path d="M503,118 L494,104"/><path d="M511,122 L511,107"/>
</g>
<circle cx="507" cy="138" r="22" fill="#fdfbf3" stroke="#d9d3c4" stroke-width="2"/>
<circle cx="515" cy="130" r="4.5" fill="#1f2b33"/>
<circle cx="516.5" cy="128.5" r="1.6" fill="#fff"/>
<g id="upperBeak">
<path d="M528,132 Q558,124 600,152 Q556,144 528,152 Z" fill="#f59b2f" stroke="#d97f1a" stroke-width="2"/>
</g>
<g id="pouch">
<path d="M528,152 Q556,158 600,152 Q574,198 544,190 Q531,170 528,152 Z" fill="#f7b04a" stroke="#e08a22" stroke-width="2" opacity=".96"/>
</g>
</g>
</g>
<g id="nearLeg" stroke="#f0a530" stroke-width="8" stroke-linecap="round">
<line id="nearThigh"/>
<line id="nearShin"/>
</g>
<g id="pedalNear" transform="translate(445,380)">
<rect x="-16" y="-6" width="32" height="12" rx="5" fill="#2e3038"/>
<ellipse cx="0" cy="-9" rx="11" ry="7" fill="#e89a2b" stroke="#c97f1f" stroke-width="2"/>
</g>
<g id="crank">
<circle cx="405" cy="390" r="14" fill="none" stroke="#6a7078" stroke-width="4"/>
<g stroke="#2e3038" stroke-width="6" stroke-linecap="round">
<line x1="405" y1="390" x2="445" y2="390"/>
<line x1="405" y1="390" x2="365" y2="390"/>
</g>
<circle cx="405" cy="390" r="7" fill="#2e3038"/>
</g>
```>
纯 SVG 绘制 · 少量 JS 计算踏板运动学(车轮、曲柄、双腿联动),翅膀与喉囊为 CSS 动画。

主楼

发表回复