2. Linux.do
  3. 也是紧急测试了一下dsp的鹈鹕骑车

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

dkjsiogu 2026-08-13 00:09 1



这是动态的


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 动画。



最新回复 (8)
  • 于小盼 08-13 00:11
    1楼

    闪现？ 我电脑的问题？？


    中间的一段不见了

  • dercheang 08-13 00:12
    2楼

    我在手机上看也是闪现的。中间丢帧了^-^

  • kfttt 08-13 00:13
    3楼

    第一次见从左到右骑过去的 ^-^，看着效果不错

  • 木原金 08-13 00:16
    4楼

    看来agent模式和chat模式出的效果完全不一样，grok那边也是，希望后面不要有人跨标准对比

  • dkjsiogu 楼主 08-13 00:23
    5楼


    gif录制有点麻烦和上传卡的比较严 是可以从右骑到左边 然后再从右边出来的

  • Kuzzz 08-13 00:28
    6楼


    跟着测了一下，好像和flash差不多 ^-^

    不知道是不是哪里出来了问题

  • Beicho 08-13 00:38
    7楼

    这个不像 GA，目前网页端大概率是没有上，应该只有在 API

  • Kuzzz 08-13 00:46
    8楼

    我也感觉不像，但确实是用的api生成的html ^-^

    还让它来了个蓝鱼戏水 ^-^ ^-^



* 帖子来源Linux.do
附近帖子
返回
飞读
随机推荐