{
  "case_id": "A1",
  "case_name": "机械花朵开合动画",
  "prompt": "生成一个机械花朵开合的SVG动画，要求：\n1. 带有分层矢量动画效果\n2. 花瓣逐层展开/闭合\n3. 添加齿轮、螺栓等机械元素\n4. 单文件HTML可直接运行",
  "result": {
    "success": true,
    "content": "这是一个单文件 HTML 代码，包含了一个具有蒸汽朋克/科幻风格的机械花朵 SVG 动画。\n\n**代码特点：**\n*   **分层动画**：花朵分为外层（装甲）、中层（机械结构）和内层（核心），通过 CSS `animation-delay` 实现逐层绽放和闭合的视觉效果。\n*   **机械元素**：背景包含旋转的齿轮，花瓣上绘制了电路纹理和铆钉（螺栓）。\n*   **视觉效果**：使用了 SVG 渐变（金属质感）和滤镜（阴影和发光），模拟 3D 机械结构。\n*   **自适应**：SVG 居中显示，适配不同屏幕大小。\n\n你可以直接将以下代码保存为 `.html` 文件并在浏览器中打开。\n\n```html\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>机械花朵开合动画</title>\n    <style>\n        body {\n            margin: 0;\n            padding: 0;\n            background: #0f1215;\n            background: radial-gradient(circle at center, #1a1f25 0%, #000000 100%);\n            height: 100vh;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            overflow: hidden;\n        }\n\n        svg {\n            width: 90vmin;\n            height: 90vmin;\n            filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.1));\n        }\n\n        /* 定义旋转动画 */\n        @keyframes spin {\n            from { transform: rotate(0deg); }\n            to { transform: rotate(360deg); }\n        }\n\n        @keyframes spin-reverse {\n            from { transform: rotate(360deg); }\n            to { transform: rotate(0deg); }\n        }\n\n        /* 定义花瓣开合动画 - 核心逻辑 */\n        /* 这里的变换是基于花瓣自身的坐标系：\n           初始状态（闭合）：向中心收缩，重叠\n           结束状态（展开）：向外平移，旋转角度微调\n        */\n        @keyframes bloom-outer {\n            0%, 100% { transform: rotate(var(--r)) translateY(-40px) scale(0.8); }\n            50% { transform: rotate(var(--r)) translateY(-110px) scale(1); }\n        }\n\n        @keyframes bloom-middle {\n            0%, 100% { transform: rotate(var(--r)) translateY(-30px) scale(0.6); }\n            50% { transform: rotate(var(--r)) translateY(-85px) scale(1); }\n        }\n\n        @keyframes bloom-inner {\n            0%, 100% { transform: rotate(var(--r)) translateY(-15px) scale(0.4); }\n            50% { transform: rotate(var(--r)) translateY(-55px) scale(1); }\n        }\n\n        @keyframes pulse-core {\n            0%, 100% { fill: #00ccff; filter: drop-shadow(0 0 5px #00ccff); transform: scale(1); }\n            50% { fill: #aaffff; filter: drop-shadow(0 0 15px #00ccff); transform: scale(1.1); }\n        }\n\n        /* 应用动画 */\n        .gear-back {\n            transform-origin: center;\n            animation: spin 20s linear infinite;\n            opacity: 0.6;\n        }\n        \n        .gear-small {\n            transform-origin: center;\n            animation: spin-reverse 12s linear infinite;\n        }\n\n        .petal {\n            transform-origin: center;\n            transition: transform 0.1s;\n        }\n\n        /* 逐层延迟，制造机械传动感 */\n        .layer-outer .petal {\n            animation: bloom-outer 8s ease-in-out infinite;\n        }\n\n        .layer-middle .petal {\n            animation: bloom-middle 8s ease-in-out infinite;\n            animation-delay: 0.2s; /* 稍微滞后 */\n        }\n\n        .layer-inner .petal {\n            animation: bloom-inner 8s ease-in-out infinite;\n            animation-delay: 0.4s; /* 最晚展开 */\n        }\n\n        .core-light {\n            transform-origin: center;\n            animation: pulse-core 4s ease-in-out infinite;\n        }\n\n    </style>\n</head>\n<body>\n\n<svg viewBox=\"-200 -200 400 400\" xmlns=\"http://www.w3.org/2000/svg\">\n    <defs>\n        <!-- 金属渐变定义 -->\n        <linearGradient id=\"steel-grad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n            <stop offset=\"0%\" style=\"stop-color:#2b323b;stop-opacity:1\" />\n            <stop offset=\"50%\" style=\"stop-color:#5c6875;stop-opacity:1\" />\n            <stop offset=\"100%\" style=\"stop-color:#1d2228;stop-opacity:1\" />\n        </linearGradient>\n        \n        <linearGradient id=\"copper-grad\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" style=\"stop-color:#8a4b26;stop-opacity:1\" />\n            <stop offset=\"40%\" style=\"stop-color:#d68e5e;stop-opacity:1\" />\n            <stop offset=\"100%\" style=\"stop-color:#52260f;stop-opacity:1\" />\n        </linearGradient>\n\n        <linearGradient id=\"gold-grad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n            <stop offset=\"0%\" style=\"stop-color:#7a6022;stop-opacity:1\" />\n            <stop offset=\"50%\" style=\"stop-color:#d4af37;stop-opacity:1\" />\n            <stop offset=\"100%\" style=\"stop-color:#5e4814;stop-opacity:1\" />\n        </linearGradient>\n\n        <!-- 滤镜：机械阴影 -->\n        <filter id=\"inset-shadow\">\n            <feOffset dx=\"0\" dy=\"1\" />\n            <feGaussianBlur stdDeviation=\"1\" result=\"offset-blur\" />\n            <feComposite operator=\"out\" in=\"SourceGraphic\" in2=\"offset-blur\" result=\"inverse\" />\n            <feFlood flood-color=\"black\" flood-opacity=\"0.7\" result=\"color\" />\n            <feComposite operator=\"in\" in=\"color\" in2=\"inverse\" result=\"shadow\" />\n            <feComposite operator=\"over\" in=\"shadow\" in2=\"SourceGraphic\" />\n        </filter>\n\n        <!-- 组件：齿轮 -->\n        <g id=\"gear-shape\">\n            <path d=\"M0 -90 L10 -90 L15 -75 L35 -70 L45 -85 L60 -75 L55 -55 L70 -40 L90 -35 L85 -15 L100 0 L85 15 L90 35 L70 40 L55 55 L60 75 L45 85 L35 70 L15 75 L10 90 L-10 90 L-15 75 L-35 70 L-45 85 L-60 75 L-55 55 L-70 40 L-90 35 L-85 15 L-100 0 L-85 -15 L-90 -35 L-70 -40 L-55 -55 L-60 -75 L-45 -85 L-35 -70 L-15 -75 L-10 -90 Z\" fill=\"none\" stroke=\"#3a4450\" stroke-width=\"2\" />\n            <circle r=\"65\" fill=\"none\" stroke=\"#3a4450\" stroke-width=\"2\" stroke-dasharray=\"5,5\"/>\n            <circle r=\"30\" fill=\"none\" stroke=\"#3a4450\" stroke-width=\"4\" />\n        </g>\n\n        <!-- 组件：外层花瓣 (装甲型) -->\n        <g id=\"petal-outer\">\n            <!-- 主体 -->\n            <path d=\"M0,0 C-20,-30 -40,-60 0,-120 C40,-60 20,-30 0,0 Z\" fill=\"url(#steel-grad)\" stroke=\"#111\" stroke-width=\"1\" filter=\"url(#inset-shadow)\" />\n            <!-- 装饰线 -->\n            <path d=\"M0,-10 L0,-110\" stroke=\"#111\" stroke-width=\"1\" opacity=\"0.5\"/>\n            <path d=\"M-15,-50 L0,-60 L15,-50\" fill=\"none\" stroke=\"#00ccff\" stroke-width=\"1\" opacity=\"0.6\" />\n            <!-- 螺栓 -->\n            <circle cx=\"-15\" cy=\"-50\" r=\"2\" fill=\"#888\" stroke=\"#000\" stroke-width=\"0.5\"/>\n            <circle cx=\"15\" cy=\"-50\" r=\"2\" fill=\"#888\" stroke=\"#000\" stroke-width=\"0.5\"/>\n            <circle cx=\"0\" cy=\"-105\" r=\"2\" fill=\"#888\" stroke=\"#000\" stroke-width=\"0.5\"/>\n        </g>\n\n        <!-- 组件：中层花瓣 (铜制机械) -->\n        <g id=\"petal-middle\">\n            <path d=\"M0,0 C-15,-20 -30,-50 0,-100 C30,-50 15,-20 0,0 Z\" fill=\"url(#copper-grad)\" stroke=\"#220f00\" stroke-width=\"1\" />\n            <!-- 电路纹理 -->\n            <path d=\"M-5,-30 L-10,-30 L-10,-70 L0,-85 L10,-70 L10,-30 L5,-30\" fill=\"none\" stroke=\"#ffaa00\" stroke-width=\"1\" opacity=\"0.4\" />\n            <rect x=\"-4\" y=\"-60\" width=\"8\" height=\"20\" fill=\"#1a0f00\" opacity=\"0.5\"/>\n        </g>\n\n        <!-- 组件：内层花瓣 (精细核心) -->\n        <g id=\"petal-inner\">\n            <path d=\"M0,0 C-10,-10 -20,-40 0,-70 C20,-40 10,-10 0,0 Z\" fill=\"url(#gold-grad)\" stroke=\"#332200\" stroke-width=\"0.5\" />\n            <circle cx=\"0\" cy=\"-50\" r=\"3\" fill=\"#00ccff\" opacity=\"0.8\"/>\n            <path d=\"M0,0 L0,-60\" stroke=\"#332200\" stroke-width=\"0.5\" opacity=\"0.5\"/>\n        </g>\n    </defs>\n\n    <!-- 背景层：旋转的大齿轮 -->\n    <g class=\"gear-back\">\n        <use href=\"#gear-shape\" />\n        <circle r=\"50\" fill=\"none\" stroke=\"#2a3038\" stroke-width=\"20\" opacity=\"0.3\"/>\n    </g>\n    \n    <!-- 背景层：反向旋转的小齿轮装饰 -->\n    <g class=\"gear-small\" transform=\"translate(120, 120) scale(0.6)\">\n        <use href=\"#gear-shape\" />\n    </g>\n    <g class=\"gear-small\" transform=\"translate(-120, -120) scale(0.6)\">\n        <use href=\"#gear-shape\" />\n    </g>\n\n    <!-- 花朵层级结构 -->\n    <g id=\"flower-assembly\">\n        \n        <!-- 外层：6瓣 -->\n        <g class=\"layer-outer\">\n            <g class=\"petal\" style=\"--r: 0deg\"><use href=\"#petal-outer\" /></g>\n            <g class=\"petal\" style=\"--r: 60deg\"><use href=\"#petal-outer\" /></g>\n            <g class=\"petal\" style=\"--r: 120deg\"><use href=\"#petal-outer\" /></g>\n            <g class=\"petal\" style=\"--r: 180deg\"><use href=\"#petal-outer\" /></g>\n            <g class=\"petal\" style=\"--r: 240deg\"><use href=\"#petal-outer\" /></g>\n            <g class=\"petal\" style=\"--r: 300deg\"><use href=\"#petal-outer\" /></g>\n        </g>\n\n        <!-- 中层：6瓣 (交错旋转30度) -->\n        <g class=\"layer-middle\">\n            <g class=\"petal\" style=\"--r: 30deg\"><use href=\"#petal-middle\" /></g>\n            <g class=\"petal\" style=\"--r: 90deg\"><use href=\"#petal-middle\" /></g>\n            <g class=\"petal\" style=\"--r: 150deg\"><use href=\"#petal-middle\" /></g>\n            <g class=\"petal\" style=\"--r: 210deg\"><use href=\"#petal-middle\" /></g>\n            <g class=\"petal\" style=\"--r: 270deg\"><use href=\"#petal-middle\" /></g>\n            <g class=\"petal\" style=\"--r: 330deg\"><use href=\"#petal-middle\" /></g>\n        </g>\n\n        <!-- 内层：6瓣 -->\n        <g class=\"layer-inner\">\n            <g class=\"petal\" style=\"--r: 0deg\"><use href=\"#petal-inner\" /></g>\n            <g class=\"petal\" style=\"--r: 60deg\"><use href=\"#petal-inner\" /></g>\n            <g class=\"petal\" style=\"--r: 120deg\"><use href=\"#petal-inner\" /></g>\n            <g class=\"petal\" style=\"--r: 180deg\"><use href=\"#petal-inner\" /></g>\n            <g class=\"petal\" style=\"--r: 240deg\"><use href=\"#petal-inner\" /></g>\n            <g class=\"petal\" style=\"--r: 300deg\"><use href=\"#petal-inner\" /></g>\n        </g>\n\n        <!-- 核心：反应堆 -->\n        <g>\n            <circle r=\"15\" fill=\"#111\" stroke=\"#444\" stroke-width=\"2\" />\n            <!-- 旋转的光圈 -->\n            <path d=\"M-8,0 L8,0 M0,-8 L0,8\" stroke=\"#333\" stroke-width=\"2\" />\n            <circle r=\"8\" class=\"core-light\" fill=\"#00ccff\" />\n            <circle r=\"18\" fill=\"none\" stroke=\"#00ccff\" stroke-width=\"1\" stroke-dasharray=\"2, 4\" opacity=\"0.7\">\n                <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 0 0\" to=\"360 0 0\" dur=\"3s\" repeatCount=\"indefinite\" />\n            </circle>\n        </g>\n\n    </g>\n</svg>\n\n</body>\n</html>\n```",
    "model": "gemini-3-pro-preview",
    "usage": {
      "prompt_tokens": 80,
      "completion_tokens": 5525,
      "total_tokens": 5605
    },
    "timestamp": "2025-11-19 13:26:23"
  },
  "needs_screenshot": true,
  "needs_manual_test": false
}