lao1 me
搜索
首页/AI

快来一起用d4f画鹈鹕骑自行车

158
  • Zhaooo
    Zhaooo2026-07-31
    28670

    图片

    实测效果无敌，grok4.5跟glm5.2都赶不上d4f，另外使用的opencode go里的d4f，看来上游确实是官方api，这下5美元套餐性价比上来了

    主楼
  • Zhaooo
    Zhaooo2026-07-31
    28670

    图片

    用不同模型画了下，还就属D4F看着最正常

    #1
  • 俺把你来梦
    俺把你来梦2026-07-31
    33202
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动态鹈鹕骑自行车</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: linear-gradient(145deg, #1a2a3a 0%, #0f1a26 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: system-ui, sans-serif;
        }
        .card {
            background: #1e2f3f;
            padding: 20px 20px 18px;
            border-radius: 40px;
            box-shadow: 0 25px 40px -10px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.06);
            transition: all 0.2s;
        }
        svg {
            display: block;
            width: 100%;
            max-width: 880px;
            height: auto;
            border-radius: 28px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
            background: #87CEEB;
            transition: filter 0.3s;
        }
        .credit {
            text-align: center;
            margin-top: 12px;
            color: rgba(255,255,255,0.25);
            font-size: 13px;
            letter-spacing: 1px;
            font-weight: 300;
        }
    </style>
</head>
<body>
<div class="card">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 880 520" width="880" height="520">
        <defs>
            <!-- 渐变天空 -->
            <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#4A9BE0"/>
                <stop offset="60%" stop-color="#87CEEB"/>
                <stop offset="100%" stop-color="#B5D8F0"/>
            </linearGradient>
            <!-- 太阳光晕 -->
            <radialGradient id="sunGlow" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stop-color="#FFF7B0" stop-opacity="1"/>
                <stop offset="40%" stop-color="#FFDD55" stop-opacity="0.9"/>
                <stop offset="100%" stop-color="#FFB347" stop-opacity="0"/>
            </radialGradient>
            <!-- 公路渐变 -->
            <linearGradient id="roadGrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#6B6B6B"/>
                <stop offset="20%" stop-color="#5A5A5A"/>
                <stop offset="100%" stop-color="#3D3D3D"/>
            </linearGradient>
            <!-- 鹈鹕身体光影 -->
            <radialGradient id="pelicanBody" cx="40%" cy="30%" r="70%">
                <stop offset="0%" stop-color="#FFFFFF"/>
                <stop offset="70%" stop-color="#F5F5F5"/>
                <stop offset="100%" stop-color="#DCDCDC"/>
            </radialGradient>
            <!-- 翅膀渐变 -->
            <linearGradient id="wingGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#F0F0F0"/>
                <stop offset="100%" stop-color="#C8C8C8"/>
            </linearGradient>
            <!-- 喙渐变 -->
            <linearGradient id="beakGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#FFA726"/>
                <stop offset="100%" stop-color="#EF6C00"/>
            </linearGradient>
            <!-- 喉囊渐变 -->
            <linearGradient id="pouchGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#FFB74D"/>
                <stop offset="100%" stop-color="#F57C00"/>
            </linearGradient>
            <!-- 残影模糊滤镜 -->
            <filter id="motionBlur" x="-20%" y="-20%" width="140%" height="140%">
                <feGaussianBlur in="SourceGraphic" stdDeviation="3 1.5"/>
            </filter>
            <filter id="shadowFilter" x="-10%" y="-10%" width="130%" height="130%">
                <feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#000" flood-opacity="0.2"/>
            </filter>
        </defs>

        <!-- 天空 -->
        <rect width="880" height="520" fill="url(#skyGrad)"/>

        <!-- 太阳 + 光晕（带动画） -->
        <circle cx="740" cy="80" r="90" fill="url(#sunGlow)" opacity="0.6">
            <animate attributeName="r" values="90;105;90" dur="4s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.6;0.8;0.6" dur="4s" repeatCount="indefinite"/>
        </circle>
        <circle cx="740" cy="80" r="48" fill="#FFD93D">
            <animate attributeName="r" values="48;52;48" dur="3s" repeatCount="indefinite"/>
        </circle>

        <!-- 云朵（飘动） -->
        <g fill="white" opacity="0.85">
            <g>
                <animateTransform attributeName="transform" type="translate" values="0,0;40,0;0,0" dur="22s" repeatCount="indefinite"/>
                <ellipse cx="120" cy="85" rx="65" ry="26"/>
                <ellipse cx="165" cy="68" rx="45" ry="22"/>
                <ellipse cx="90" cy="72" rx="38" ry="18"/>
            </g>
            <g>
                <animateTransform attributeName="transform" type="translate" values="0,0;-30,0;0,0" dur="26s" repeatCount="indefinite"/>
                <ellipse cx="480" cy="60" rx="55" ry="22"/>
                <ellipse cx="530" cy="48" rx="40" ry="18"/>
                <ellipse cx="445" cy="52" rx="35" ry="16"/>
            </g>
        </g>

        <!-- 远山（柔和） -->
        <ellipse cx="180" cy="370" rx="240" ry="95" fill="#7CB342" opacity="0.7"/>
        <ellipse cx="650" cy="380" rx="280" ry="100" fill="#8BC34A" opacity="0.6"/>
        <ellipse cx="420" cy="365" rx="200" ry="80" fill="#AED581" opacity="0.5"/>

        <!-- 公路 -->
        <rect x="0" y="365" width="880" height="155" fill="url(#roadGrad)"/>
        <!-- 路沿 -->
        <rect x="0" y="365" width="880" height="6" fill="#A0A0A0" opacity="0.5"/>
        <rect x="0" y="514" width="880" height="6" fill="#A0A0A0" opacity="0.4"/>
        <!-- 中间虚线（流动效果） -->
        <g stroke="#FFD93D" stroke-width="5" stroke-dasharray="40 28">
            <line x1="0" y1="440" x2="880" y2="440">
                <animate attributeName="x1" values="0;60;0" dur="2s" repeatCount="indefinite"/>
                <animate attributeName="x2" values="880;940;880" dur="2s" repeatCount="indefinite"/>
            </line>
        </g>

        <!-- 路侧小草 -->
        <g fill="#66BB6A">
            <path d="M 40 370 L 46 352 L 52 370"/>
            <path d="M 200 368 L 206 350 L 212 368"/>
            <path d="M 660 370 L 666 353 L 672 370"/>
            <path d="M 800 368 L 806 350 L 812 368"/>
            <path d="M 120 372 L 126 356 L 132 372"/>
        </g>

        <!-- ========= 动态残影（速度感） ========= -->
        <g filter="url(#motionBlur)" opacity="0.13">
            <circle cx="270" cy="415" r="42" fill="none" stroke="#222" stroke-width="4"/>
            <circle cx="430" cy="415" r="42" fill="none" stroke="#222" stroke-width="4"/>
        </g>
        <g filter="url(#motionBlur)" opacity="0.07">
            <circle cx="235" cy="415" r="42" fill="none" stroke="#222" stroke-width="4"/>
            <circle cx="400" cy="415" r="42" fill="none" stroke="#222" stroke-width="4"/>
        </g>

        <!-- ========= 自行车组 ========= -->
        <g filter="url(#shadowFilter)">
            <!-- 后轮 -->
            <g>
                <circle cx="330" cy="415" r="42" fill="none" stroke="#2C2C2C" stroke-width="5"/>
                <circle cx="330" cy="415" r="6" fill="#1A1A1A"/>
                <!-- 轮圈高光 -->
                <circle cx="330" cy="415" r="42" fill="none" stroke="#555" stroke-width="1.5" opacity="0.3"/>
                <!-- 辐条（旋转动画） -->
                <g stroke="#3A3A3A" stroke-width="1.8">
                    <animateTransform attributeName="transform" type="rotate" from="0 330 415" to="360 330 415" dur="0.8s" repeatCount="indefinite"/>
                    <line x1="330" y1="373" x2="330" y2="457"/>
                    <line x1="288" y1="415" x2="372" y2="415"/>
                    <line x1="300" y1="385" x2="360" y2="445"/>
                    <line x1="360" y1="385" x2="300" y2="445"/>
                    <line x1="293" y1="402" x2="367" y2="428"/>
                    <line x1="367" y1="402" x2="293" y2="428"/>
                    <line x1="315" y1="376" x2="345" y2="454"/>
                    <line x1="345" y1="376" x2="315" y2="454"/>
                </g>
            </g>

            <!-- 前轮 -->
            <g>
                <circle cx="490" cy="415" r="42" fill="none" stroke="#2C2C2C" stroke-width="5"/>
                <circle cx="490" cy="415" r="6" fill="#1A1A1A"/>
                <circle cx="490" cy="415" r="42" fill="none" stroke="#555" stroke-width="1.5" opacity="0.3"/>
                <g stroke="#3A3A3A" stroke-width="1.8">
                    <animateTransform attributeName="transform" type="rotate" from="0 490 415" to="360 490 415" dur="0.8s" repeatCount="indefinite"/>
                    <line x1="490" y1="373" x2="490" y2="457"/>
                    <line x1="448" y1="415" x2="532" y2="415"/>
                    <line x1="460" y1="385" x2="520" y2="445"/>
                    <line x1="520" y1="385" x2="460" y2="445"/>
                    <line x1="453" y1="402" x2="527" y2="428"/>
                    <line x1="527" y1="402" x2="453" y2="428"/>
                    <line x1="475" y1="376" x2="505" y2="454"/>
                    <line x1="505" y1="376" x2="475" y2="454"/>
                </g>
            </g>

            <!-- 车架（橙色调） -->
            <g stroke="#E85D04" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round" fill="none">
                <line x1="330" y1="415" x2="395" y2="380"/>
                <line x1="395" y1="380" x2="490" y2="415"/>
                <line x1="330" y1="415" x2="375" y2="358"/>
                <line x1="375" y1="358" x2="395" y2="380"/>
                <line x1="375" y1="358" x2="440" y2="348"/>
                <line x1="440" y1="348" x2="490" y2="415"/>
                <line x1="440" y1="348" x2="465" y2="318"/>
            </g>

            <!-- 车座 -->
            <rect x="365" y="346" width="32" height="10" rx="5" fill="#1A1A1A"/>
            <line x1="381" y1="356" x2="381" y2="363" stroke="#1A1A1A" stroke-width="4"/>

            <!-- 把手 -->
            <line x1="465" y1="318" x2="500" y2="328" stroke="#1A1A1A" stroke-width="4.5" stroke-linecap="round"/>
            <line x1="465" y1="318" x2="480" y2="312" stroke="#1A1A1A" stroke-width="4.5" stroke-linecap="round"/>
            <!-- 握把 -->
            <rect x="494" y="324" width="14" height="8" rx="4" fill="#1A1A1A"/>
            <rect x="462" y="308" width="8" height="14" rx="4" fill="#1A1A1A"/>

            <!-- 脚踏曲柄（旋转） -->
            <g>
                <animateTransform attributeName="transform" type="rotate" from="0 375 390" to="360 375 390" dur="1.6s" repeatCount="indefinite"/>
                <line x1="375" y1="390" x2="375" y2="370" stroke="#2C2C2C" stroke-width="4.5" stroke-linecap="round"/>
                <!-- 脚踏板 -->
                <rect x="367" y="364" width="16" height="8" rx="3" fill="#444"/>
                <!-- 另一侧脚踏（反向） -->
                <line x1="375" y1="390" x2="375" y2="410" stroke="#2C2C2C" stroke-width="4.5" stroke-linecap="round"/>
                <rect x="367" y="408" width="16" height="8" rx="3" fill="#444"/>
            </g>

            <!-- 链条（随动） -->
            <ellipse cx="350" cy="408" rx="30" ry="12" fill="none" stroke="#3D3D3D" stroke-width="2.5" transform="rotate(-12 350 408)"/>
        </g>

        <!-- ========= 鹈鹕 ========= -->
        <g filter="url(#shadowFilter)">
            <!-- 身体 -->
            <ellipse cx="410" cy="320" rx="50" ry="38" fill="url(#pelicanBody)" stroke="#D0D0D0" stroke-width="1.2"/>
            <!-- 腹部阴影 -->
            <ellipse cx="410" cy="330" rx="42" ry="25" fill="#E8E8E8" opacity="0.5"/>

            <!-- 左翅（作为手臂，握住把手） -->
            <g>
                <path d="M 415 292 Q 445 295 470 308 Q 485 315 495 320" fill="none" stroke="url(#wingGrad)" stroke-width="8" stroke-linecap="round"/>
                <path d="M 415 292 Q 445 295 470 308 Q 485 315 495 320" fill="none" stroke="#C0C0C0" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
                <!-- 翅尖握把 -->
                <ellipse cx="496" cy="322" rx="8" ry="5" fill="#D0D0D0"/>
                <ellipse cx="496" cy="322" rx="8" ry="5" fill="none" stroke="#B0B0B0" stroke-width="0.8"/>
            </g>

            <!-- 右翅（展开，增加动感） -->
            <g>
                <path d="M 385 300 Q 350 270 365 255 Q 375 248 390 265" fill="url(#wingGrad)" stroke="#BDBDBD" stroke-width="1.2"/>
                <path d="M 380 295 Q 355 275 375 265" fill="none" stroke="#B0B0B0" stroke-width="0.8" opacity="0.6"/>
                <!-- 翅尖羽毛 -->
                <path d="M 365 255 Q 355 248 360 242 Q 370 245 375 255" fill="#E8E8E8" stroke="#C0C0C0" stroke-width="0.6"/>
                <path d="M 370 250 Q 362 242 368 236 Q 378 240 380 250" fill="#E0E0E0" stroke="#C0C0C0" stroke-width="0.6"/>
            </g>

            <!-- 尾巴 -->
            <path d="M 360 325 Q 335 312 340 335 Q 348 330 360 332" fill="#E0E0E0" stroke="#C0C0C0" stroke-width="1"/>
            <path d="M 358 318 Q 330 305 336 325" fill="#D5D5D5" stroke="#C0C0C0" stroke-width="0.8"/>

            <!-- 脖子（优雅弯曲） -->
            <path d="M 445 305 Q 462 275 458 252 Q 453 235 440 240" fill="url(#pelicanBody)" stroke="#D0D0D0" stroke-width="1.2"/>
            <!-- 脖子阴影 -->
            <path d="M 440 300 Q 455 272 452 252" fill="none" stroke="#E0E0E0" stroke-width="4" opacity="0.3"/>

            <!-- 头部 -->
            <circle cx="448" cy="238" r="22" fill="url(#pelicanBody)" stroke="#D0D0D0" stroke-width="1.2"/>

            <!-- 眼睛（闪光） -->
            <circle cx="458" cy="232" r="6" fill="#FFD93D"/>
            <circle cx="459" cy="231" r="3.5" fill="#1A1A1A"/>
            <circle cx="460.5" cy="229.5" r="1.8" fill="white"/>
            <!-- 眉毛（可爱） -->
            <path d="M 452 224 Q 458 220 465 224" fill="none" stroke="#A0A0A0" stroke-width="1.8" stroke-linecap="round"/>

            <!-- 大喙（上下结构） -->
            <path d="M 468 238 L 520 244 L 468 254 Z" fill="url(#beakGrad)" stroke="#D84315" stroke-width="1.2"/>
            <!-- 上喙钩 -->
            <path d="M 518 243 Q 526 239 522 247" fill="#E65100" stroke="#BF360C" stroke-width="0.8"/>
            <!-- 喙中线 -->
            <path d="M 468 246 L 515 246" fill="none" stroke="#E65100" stroke-width="1" opacity="0.5"/>

            <!-- 喉囊（动态微微鼓动） -->
            <path d="M 468 254 Q 490 278 515 258 Q 500 268 468 254" fill="url(#pouchGrad)" opacity="0.85" stroke="#E65100" stroke-width="0.8">
                <animate attributeName="d" values="M 468 254 Q 490 278 515 258 Q 500 268 468 254;M 468 254 Q 492 283 515 258 Q 502 272 468 254;M 468 254 Q 490 278 515 258 Q 500 268 468 254" dur="2.2s" repeatCount="indefinite"/>
            </path>

            <!-- 冠羽（随风飘动） -->
            <path d="M 442 218 Q 448 200 455 215" fill="none" stroke="#D0D0D0" stroke-width="2.5" stroke-linecap="round">
                <animate attributeName="d" values="M 442 218 Q 448 200 455 215;M 442 218 Q 450 196 458 214;M 442 218 Q 448 200 455 215" dur="1.8s" repeatCount="indefinite"/>
            </path>
            <path d="M 436 222 Q 440 202 447 218" fill="none" stroke="#D0D0D0" stroke-width="2" stroke-linecap="round">
                <animate attributeName="d" values="M 436 222 Q 440 202 447 218;M 436 222 Q 442 198 450 216;M 436 222 Q 440 202 447 218" dur="2s" repeatCount="indefinite"/>
            </path>

            <!-- 腮红 -->
            <ellipse cx="454" cy="246" rx="8" ry="4" fill="#FF8A80" opacity="0.4"/>

            <!-- 双腿（骑行动作，随脚踏旋转） -->
            <g>
                <!-- 左腿（后腿） -->
                <line x1="400" y1="350" x2="385" y2="368" stroke="#F57C00" stroke-width="6" stroke-linecap="round"/>
                <line x1="385" y1="368" x2="375" y2="375" stroke="#F57C00" stroke-width="5" stroke-linecap="round"/>
                <ellipse cx="372" cy="378" rx="9" ry="5" fill="#F57C00"/>

                <!-- 右腿（前腿） -->
                <line x1="408" y1="350" x2="420" y2="370" stroke="#F57C00" stroke-width="6" stroke-linecap="round"/>
                <line x1="420" y1="370" x2="430" y2="380" stroke="#F57C00" stroke-width="5" stroke-linecap="round"/>
                <ellipse cx="433" cy="383" rx="9" ry="5" fill="#F57C00"/>
            </g>
        </g>

        <!-- 路面光影（移动光斑） -->
        <ellipse cx="200" cy="470" rx="120" ry="15" fill="white" opacity="0.04">
            <animate attributeName="cx" values="200;800;200" dur="7s" repeatCount="indefinite"/>
        </ellipse>
        <ellipse cx="500" cy="490" rx="90" ry="10" fill="white" opacity="0.03">
            <animate attributeName="cx" values="500;-100;500" dur="8s" repeatCount="indefinite"/>
        </ellipse>
    </svg>
    <div class="credit">🚲 鹈鹕 · 动态骑行</div>
</div>
</body>
</html>
    #2
  • kknd22
    kknd222026-07-31
    29201

    鹈鹕的提示词是什么呢？我也去试试

    #3
  • Zhaooo
    Zhaooo2026-07-31
    28670

    创建一个HTML，内容是SVG绘制一个鹈鹕骑自行车的2D动画。

    #4
  • Mulin_Zz
    Mulin_Zz2026-07-31
    27337

    opencode里面的ds是接的api吗，之前看到说是自部署

    #5
  • event
    event2026-07-31
    7295

    佬，和Grok 4.5相比，综合体感怎么样？

    #6
  • Zhaooo
    Zhaooo2026-07-31
    28670

    我用的就是opencodego里的，实测跟官方没有区别，说明ocg的上游就是官方

    #7
  • Zhaooo
    Zhaooo2026-07-31
    28670

    写了几个功能，基本可代替grok，但硬伤是没有视觉并且没grok快。

    #8

发表回复

登录后回复