• 徐福

    提示词:生成一个鹈鹕骑自行车的SVG动图```
    <svg xmlns="http://www.w3.org/2000/svg&quot; viewBox="0 0 800 600" width="100%" height="100%">
    <defs>
    <!-- 背景渐变 -->
    <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#BAE6FD"/>
    <stop offset="60%" stop-color="#E0F2FE"/>
    <stop offset="100%" stop-color="#F0F9FF"/>
    </linearGradient>

    <linearGradient id="roadGrad" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#64748B"/>
    <stop offset="20%" stop-color="#475569"/>
    <stop offset="100%" stop-color="#334155"/>
    </linearGradient>

    <!-- 鹈鹕嘴巴渐变 -->
    <linearGradient id="beakGrad" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#FDBA74"/>
    <stop offset="100%" stop-color="#FB923C"/>
    </linearGradient>

    <linearGradient id="pouchGrad" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#FDBA74"/>
    <stop offset="60%" stop-color="#F97316"/>
    <stop offset="100%" stop-color="#EA580C"/>
    </linearGradient>

    <!-- 自行车车架金属质感 -->
    <linearGradient id="frameGrad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#059669"/>
    <stop offset="50%" stop-color="#10B981"/>
    <stop offset="100%" stop-color="#047857"/>
    </linearGradient>

    <!-- 阴影定义 -->
    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
    <feDropShadow dx="0" dy="4" stdDeviation="3" flood-opacity="0.15"/>
    </filter>
    </defs>

    <style>
    / ============= 核心动画定义 ============= /

    / 车轮与曲柄旋转 (0.8秒一圈) /
    .spin {
    animation: rotateAnim 0.8s linear infinite;
    }
    .spin-reverse {
    animation: rotateAnim 0.8s linear reverse infinite;
    }

    @keyframes rotateAnim {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
    }

    / 地面标线倒退 /
    .road-move {
    animation: roadLine 0.4s linear infinite;
    }
    @keyframes roadLine {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -120; }
    }

    / 远景白云飘动 /
    .cloud-back {
    animation: cloudAnim 12s linear infinite;
    }
    .cloud-front {
    animation: cloudAnim 7s linear infinite;
    }
    @keyframes cloudAnim {
    from { transform: translateX(850px); }
    to { transform: translateX(-300px); }
    }

    / 鹈鹕身体骑行动作上下律动 /
    .bouncing-body {
    animation: bounce 0.4s ease-in-out infinite alternate;
    transform-origin: 390px 420px;
    }
    @keyframes bounce {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-7px) rotate(-1.5deg); }
    }

    / 围巾随风摆动 /
    .scarf-wave {
    animation: scarf 0.4s ease-in-out infinite alternate;
    transform-origin: 340px 225px;
    }
    @keyframes scarf {
    0% { transform: rotate(0deg) scaleY(1); }
    100% { transform: rotate(12deg) scaleY(0.85) skewX(-10deg); }
    }

    / 眨眼动画 /
    .eye-blink {
    animation: blink 3.5s infinite;
    transform-origin: 430px 175px;
    }
    @keyframes blink {
    0%, 48%, 52%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.1); }
    }

    / 扬尘微粒效果 /
    .dust {
    animation: dustFly 0.6s ease-out infinite;
    }
    .dust-2 { animation-delay: 0.2s; }
    .dust-3 { animation-delay: 0.4s; }
    @keyframes dustFly {
    0% { opacity: 0.8; transform: translate(0, 0) scale(0.6); }
    100% { opacity: 0; transform: translate(-70px, -25px) scale(1.6); }
    }

    / 设定旋转中心 /
    #back-wheel, #back-spokes { transform-origin: 220px 450px; }
    #front-wheel, #front-spokes { transform-origin: 580px 450px; }
    #crank-set { transform-origin: 390px 450px; }
    #front-pedal { transform-origin: 390px 400px; }
    #back-pedal { transform-origin: 390px 500px; }
    </style>

    <!-- 1. 背景层 -->
    <rect x="0" y="0" width="800" height="600" fill="url(#skyGrad)" />

    <!-- 远景山峦 -->
    <path d="M-50 480 Q 120 360, 280 440 T 600 400 Q 720 370, 850 480 Z" fill="#99F6E4" opacity="0.6"/>
    <path d="M-20 480 Q 200 390, 420 460 T 850 450 L 850 480 Z" fill="#A7F3D0" opacity="0.8"/>

    <!-- 飘动的白云 -->
    <g class="cloud-back" opacity="0.7">
    <path d="M0 120 Q15 100, 40 105 Q60 85, 90 95 Q115 80, 135 100 Q155 105, 160 125 Z" fill="#FFFFFF"/>
    </g>
    <g class="cloud-front" opacity="0.9" style="margin-top: 40px;">
    <path d="M0 70 Q25 45, 55 55 Q85 30, 120 45 Q150 25, 175 55 Q205 60, 210 85 Z" fill="#FFFFFF"/>
    </g>

    <!-- 2. 地面与马路 -->
    <rect x="0" y="480" width="800" height="120" fill="url(#roadGrad)" />
    <!-- 草地路肩 -->
    <rect x="0" y="475" width="800" height="12" fill="#34D399" />
    <!-- 动态斑马线/车道虚线 -->
    <line x1="-50" y1="540" x2="850" y2="540" stroke="#F8FAFC" stroke-width="8" stroke-dasharray="50 70" stroke-linecap="round" class="road-move" />

    <!-- 速度风线 -->
    <g stroke="#FFFFFF" stroke-width="2.5" opacity="0.4" stroke-linecap="round">
    <line x1="80" y1="200" x2="20" y2="200" class="road-move" style="animation-duration: 0.3s;"/>
    <line x1="140" y1="280" x2="50" y2="280" class="road-move" style="animation-duration: 0.4s;"/>
    <line x1="100" y1="360" x2="30" y2="360" class="road-move" style="animation-duration: 0.25s;"/>
    </g>

    <!-- 3. 自行车阴影 -->
    <ellipse cx="400" cy="510" rx="230" ry="14" fill="#1E293B" opacity="0.35" />

    <!-- 4. 自行车后轮及后部组件 -->
    <!-- 后轮扬尘 -->
    <g fill="#CBD5E1" opacity="0.6">
    <circle cx="160" cy="485" r="8" class="dust dust-1" />
    <circle cx="150" cy="480" r="12" class="dust dust-2" />
    <circle cx="170" cy="490" r="6" class="dust dust-3" />
    </g>

    <!-- 后车轮 (Spinning) -->
    <g id="back-wheel-group">
    <!-- 外胎与轮辋 -->
    <circle cx="220" cy="450" r="60" fill="none" stroke="#1E293B" stroke-width="12" />
    <circle cx="220" cy="450" r="54" fill="none" stroke="#F1F5F9" stroke-width="3" />
    <!-- 辐条 -->
    <g id="back-spokes" class="spin" stroke="#94A3B8" stroke-width="1.5">
    <line x1="220" y1="396" x2="220" y2="504" />
    <line x1="166" y1="450" x2="274" y2="450" />
    <line x1="182" y1="412" x2="258" y2="488" />
    <line x1="182" y1="488" x2="258" y2="412" />
    </g>
    <!-- 轴心 -->
    <circle cx="220" cy="450" r="7" fill="#475569" />
    </g>

    <!-- 后脚蹬与后腿 (背侧,在车架后) -->
    <g>
    <!-- 连杆 -->
    <line x1="390" y1="450" x2="390" y2="500" stroke="#64748B" stroke-width="6" stroke-linecap="round" id="back-pedal-crank" class="spin" />
    <!-- 踏板 -->
    <rect x="375" y="495" width="30" height="8" rx="3" fill="#1E293B" class="spin-reverse" id="back-pedal" />
    <!-- 鹈鹕左脚蹼(暗部) -->
    <path d="M 370 495 Q 360 480, 345 425 Q 360 425, 390 495 Z" fill="#D97706" opacity="0.8"/>
    </g>

    <!-- 5. 自行车车架 -->
    <g stroke="url(#frameGrad)" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" filter="url(#shadow)">
    <!-- 后下叉 & 后上叉 -->
    <line x1="220" y1="450" x2="390" y2="450" />
    <line x1="220" y1="450" x2="330" y2="340" />
    <!-- 座管 -->
    <line x1="330" y1="340" x2="390" y2="450" />
    <!-- 主梁 (下管 & 上管 - 复古弯梁斜跨风格) -->
    <line x1="390" y1="450" x2="540" y2="330" />
    <path d="M 330 340 Q 420 370, 540 330" fill="none" />
    <!-- 前叉 -->
    <line x1="540" y1="330" x2="580" y2="450" />
    <!-- 龙头立管与把手 -->
    <path d="M 540 330 L 530 270 L 490 285" fill="none" stroke="#CBD5E1" stroke-width="8"/>
    </g>

    <!-- 车座与车铃复古细节 -->
    <path d="M 305 335 C 305 330, 325 320, 355 330 C 365 333, 360 345, 345 345 C 330 345, 310 345, 305 335 Z" fill="#78350F" />
    <circle cx="535" cy="265" r="7" fill="#F59E0B" /> <!-- 小车铃 -->
    <path d="M 485 285 L 495 285" stroke="#1E293B" stroke-width="12" stroke-linecap="round"/> <!-- 车把手胶套 -->

    <!-- 前车轮 (Spinning) -->
    <g id="front-wheel-group">
    <!-- 外胎与轮辋 -->
    <circle cx="580" cy="450" r="60" fill="none" stroke="#1E293B" stroke-width="12" />
    <circle cx="580" cy="450" r="54" fill="none" stroke="#F1F5F9" stroke-width="3" />
    <!-- 辐条 -->
    <g id="front-spokes" class="spin" stroke="#94A3B8" stroke-width="1.5">
    <line x1="580" y1="396" x2="580" y2="504" />
    <line x1="526" y1="450" x2="634" y2="450" />
    <line x1="542" y1="412" x2="618" y2="488" />
    <line x1="542" y1="488" x2="618" y2="412" />
    </g>
    <!-- 轴心 -->
    <circle cx="580" cy="450" r="7" fill="#475569" />
    </g>

    <!-- 6. 核心主角:大嘴鹈鹕 (整只鸟带上下颠簸律动) -->
    <g class="bouncing-body">

    <!-- 尾羽 -->
    <path d="M 270 330 Q 240 335, 230 320 Q 250 345, 260 360 Q 275 350, 290 345 Z" fill="#E2E8F0" />

    <!-- 身体 (胖乎乎的鹅蛋身躯) -->
    <path d="M 280 340 C 270 280, 340 240, 390 260 C 430 275, 430 360, 380 395 C 330 430, 290 400, 280 340 Z" fill="#FFFFFF" filter="url(#shadow)"/>
    <!-- 腹部阴影质感 -->
    <path d="M 295 370 C 325 415, 375 405, 380 395 C 360 385, 310 360, 295 370 Z" fill="#CBD5E1" opacity="0.5"/>

    <!-- 飘动红围巾 - 结与尾部 -->
    <g class="scarf-wave">
    <path d="M 345 235 C 310 230, 260 215, 220 225 C 255 245, 295 250, 335 250 Z" fill="#EF4444" />
    <path d="M 335 240 C 290 255, 250 265, 210 280 C 245 285, 290 270, 330 255 Z" fill="#DC2626" />
    </g>

    <!-- 鹈鹕脖子与头部 -->
    <path d="M 360 250 C 370 200, 385 160, 420 150 C 455 140, 470 180, 450 220 C 430 250, 390 265, 360 250 Z" fill="#FFFFFF" />

    <!-- 围巾领口环 -->
    <path d="M 355 230 C 370 225, 405 235, 410 250 C 395 265, 365 260, 355 230 Z" fill="#EF4444" />

    <!-- 巨大特色:鹈鹕的大嘴和大喉囊 -->
    <!-- 1. 下喉囊 (大网兜) -->
    <path d="M 440 185 Q 520 200, 565 175 C 550 245, 470 270, 425 210 Z" fill="url(#pouchGrad)" filter="url(#shadow)"/>
    <!-- 2. 上喙 (带小弯钩) -->
    <path d="M 430 165 Q 520 160, 580 170 C 585 173, 580 182, 570 180 L 435 185 Z" fill="url(#beakGrad)" />
    <!-- 喙上的小红勾 -->
    <path d="M 573 172 Q 582 173, 577 181 Z" fill="#EA580C" />

    <!-- 眼睛区域 -->
    <circle cx="430" cy="165" r="9" fill="#FFFFFF" />
    <g class="eye-blink">
    <circle cx="433" cy="165" r="5" fill="#0F172A" />
    <circle cx="435" cy="163" r="1.8" fill="#FFFFFF" /> <!-- 高光 -->
    </g>
    <path d="M 422 155 Q 432 150, 442 156" stroke="#475569" stroke-width="2" fill="none" stroke-linecap="round"/> <!-- 眉毛 -->

    <!-- 复古帅气小帽 (深蓝贝雷帽) -->
    <path d="M 405 152 C 405 130, 455 125, 460 145 C 465 152, 435 155, 405 152 Z" fill="#1E3A8A" />
    <circle cx="435" cy="128" r="4" fill="#F59E0B" /> <!-- 帽顶小球 -->

    <!-- 翅膀 (握住车把手的前肢) -->
    <path d="M 330 280 C 360 270, 420 300, 485 290 C 475 310, 440 340, 390 340 C 345 340, 325 310, 330 280 Z" fill="#F8FAFC" stroke="#E2E8F0" stroke-width="2" filter="url(#shadow)"/>
    <!-- 羽毛纹理 -->
    <path d="M 420 315 Q 455 315, 480 295" stroke="#CBD5E1" stroke-width="2.5" fill="none" stroke-linecap="round"/>
    <path d="M 390 325 Q 430 330, 455 310" stroke="#CBD5E1" stroke-width="2.5" fill="none" stroke-linecap="round"/>

    </g> <!-- /bouncing-body -->

    <!-- 7. 自行车大齿盘、前曲柄与右脚蹼 (最前端图层) -->
    <!-- 牙盘中心轴 -->
    <circle cx="390" cy="450" r="18" fill="#475569" />
    <circle cx="390" cy="450" r="14" fill="#64748B" />

    <!-- 前侧旋转脚踏组合 (Spinning) -->
    <g id="crank-set" class="spin">
    <!-- 曲柄杆 (向上) -->
    <line x1="390" y1="450" x2="390" y2="400" stroke="#CBD5E1" stroke-width="7" stroke-linecap="round" />
    <circle cx="390" cy="400" r="5" fill="#334155"/>
    </g>

    <!-- 前侧脚踏板 (保持水平反转) -->
    <g style="animation: rotateAnim 0.8s linear infinite; transform-origin: 390px 450px;">
    <!-- 利用在曲柄端点的逆向旋转维持水平 -->
    <g style="transform: translate(0px, -50px);">
    <rect x="375" y="445" width="32" height="10" rx="3" fill="#0F172A" class="spin-reverse" style="transform-origin: 390px 450px;" />
    </g>
    </g>

    <!-- 鹈鹕右腿与脚蹼 (随骑行动作微调) -->
    <g class="bouncing-body">
    <!-- 大腿根部到脚掌 -->
    <path d="M 365 375 L 390 410" stroke="#F59E0B" stroke-width="9" stroke-linecap="round"/>
    <!-- 亮黄色大脚蹼踩在踏板上 -->
    <path d="M 375 410 C 370 400, 415 390, 420 405 C 420 415, 395 415, 375 410 Z" fill="#F59E0B" filter="url(#shadow)"/>
    </g>

    <!-- 链条罩护板 -->
    <path d="M 380 440 L 450 443 C 465 443, 465 457, 450 457 L 380 460 Z" fill="#047857" opacity="0.9"/>

    </svg>
    ```图片

    主楼
  • 来自_M78_星云的喜羊羊手握神光棒变身

    我看到的已经在动了,就是为啥身子全透明?显示问题吗?

    #1
  • 翠花上酸菜

    你这3.7降智了?Gemini的前端一直都很强

    #2
  • futureman

    图片

    不是同一个3.7吗

    #3
  • 徐福

    我的脚架甚至在满天飞,我是Pro账号,应该不至于降智

    #4
  • futureman

    我也是pro,但是看着效果明显不太一样,你反代出来用的吗

    #5
  • Diako

    图片

    这可咋办,好像不是很行的样子,身子是完整的,就是上传到L站,丢掉了一些元素,但是脚没有跟着踏板动这个是存在问题

    #6
  • 三点水也

    难道我的是假的 Gemini 3.7

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

    [!note]
    提示词如上,没有额外Skill

    [Kapture 2026-08-14 at 10.03.26]

    #7
  • outo

    图片

    改了两次,第一次是头在天上飞,其他正常,第二次是左脚没有踏板,改完就完全正常

    #8
  • ash04260214

    (帖子已被作者删除)

    #9

发表回复

登录后回复