```json{
"summary": "创建的鹈鹕SVG插画，包含动态骑行姿态、细节丰富的鹈鹕特征和复古自行车设计",
"widget": {"type":"full-html","html":"<!DOCTYPE html>\n<html lang=\"zh\">\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 display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background: linear-gradient(135deg, #e0f7fa, #bbdefb);\n font-family: 'Arial', sans-serif;\n }\n .container {\n text-align: center;\n max-width: 800px;\n padding: 20px;\n }\n h1 {\n color: #0288d1;\n font-size: 2.5rem;\n margin-bottom: 10px;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n }\n .subtitle {\n color: #0277bd;\n font-size: 1.2rem;\n margin-bottom: 30px;\n }\n .scene {\n position: relative;\n width: 100%;\n height: 500px;\n background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><rect width=\"100\" height=\"100\" fill=\"%23c8e6c9\"/><path d=\"M0 50 Q 25 40, 50 50 T 100 50 L100 100 L0 Z\" fill=\"%23a5d6a7\"/></svg>') repeat-x bottom;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 10px 30px rgba(0,0,0,0.15);\n }\n .sun {\n position: absolute;\n top: 30px;\n right: 50px;\n width: 60px;\n height: 60px;\n background: radial-gradient(circle, #FFEB3B, #FFC107);\n border-radius: 50%;\n filter: blur(1px);\n }\n .cloud {\n position: absolute;\n background: white;\n border-radius: 50%;\n filter: blur(1px);\n }\n .cloud1 { top: 40px; left: 10%; width: 80px; height: 40px; }\n .cloud1:before, .cloud1:after { content: ''; position: absolute; background: white; border-radius: 50%; }\n .cloud1:before { width: 50px; height: 50px; top: -20px; left: 15px; }\n .cloud1:after { width: 40px; height: 40px; top: -10px; left: 50px; }\n \n .cloud2 { top: 70px; left: 40%; width: 60px; height: 30px; }\n .cloud2:before, .cloud2:after { content: ''; position: absolute; background: white; border-radius: 50%; }\n .cloud2:before { width: 40px; height: 40px; top: -15px; left: 10px; }\n .cloud2:after { width: 30px; height: 30px; top: -10px; left: 40px; }\n \n .cyclist-container {\n position: absolute;\n bottom: 100px;\n left: 50%;\n transform: translateX(-50%);\n animation: ride 10s infinite linear;\n }\n @keyframes ride {\n 0% { transform: translateX(-50%) translateX(-100px); }\n 100% { transform: translateX(-50%) translateX(calc(100vw + 200px)); }\n }\n .road {\n position: absolute;\n bottom: 0;\n width: 200%;\n height: 100px;\n background: repeating-linear-gradient(\n 90deg,\n #555 0px,\n #555 20px,\n #777 20px,\n #777 40px\n );\n animation: roadMove 5s infinite linear;\n }\n @keyframes roadMove {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-40px); }\n }\n .controls {\n margin-top: 25px;\n }\n button {\n background: #0288d1;\n color: white;\n border: none;\n padding: 12px 24px;\n margin: 0 10px;\n border-radius: 30px;\n cursor: pointer;\n font-size: 1rem;\n transition: all 0.3s ease;\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n }\n button:hover {\n background: #0277bd;\n transform: translateY(-2px);\n box-shadow: 0 6px 12px rgba(0,0,0,0.25);\n }\n .speed-control {\n margin-top: 15px;\n }\n input[type='range'] {\n width: 300px;\n margin: 0 10px;\n }\n </style>\n</head>\n<body>\n <div class=\"container\">\n <h1>骑自行车的鹈鹕</h1>\n <div class=\"subtitle\">Pelican Cyclist Adventure</div>\n \n <div class=\"scene\">\n <div class=\"sun\"></div>\n <div class=\"cloud cloud1\"></div>\n <div class=\"cloud cloud2\"></div>\n \n <div class=\"cyclist-container\">\n <svg width=\"300\" height=\"250\" viewBox=\"0 0 300 250\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- 自行车 -->\n <g id=\"bike\">\n <!-- 车架 -->\n <path d=\"M80 150 L150 100 L220 150 L200 170 L150 120 L100 170 Z\" fill=\"#795548\" stroke=\"#5D4037\" stroke-width=\"2\"/>\n <!-- 座椅 -->\n <ellipse cx=\"150\" cy=\"100\" rx=\"15\" ry=\"5\" fill=\"#607D8B\" />\n <!-- 前轮 -->\n <circle cx=\"220\" cy=\"150\" r=\"30\" fill=\"none\" stroke=\"#212121\" stroke-width=\"4\" />\n <circle cx=\"220\" cy=\"150\" r=\"25\" fill=\"none\" stroke=\"#424242\" stroke-width=\"1\" />\n <!-- 辐条 -->\n <line x1=\"220\" y1=\"120\" x2=\"220\" y2=\"180\" stroke=\"#424242\" stroke-width=\"1\" />\n <line x1=\"190\" y1=\"150\" x2=\"250\" y2=\"150\" stroke=\"#424242\" stroke-width=\"1\" />\n <line x1=\"200\" y1=\"130\" x2=\"240\" y2=\"170\" stroke=\"#424242\" stroke-width=\"1\" />\n <line x1=\"200\" y1=\"170\" x2=\"240\" y2=\"130\" stroke=\"#424242\" stroke-width=\"1\" />\n <!-- 后轮 -->\n <circle cx=\"80\" cy=\"150\" r=\"30\" fill=\"none\" stroke=\"#212121\" stroke-width=\"4\" />\n <circle cx=\"80\" cy=\"150\" r=\"25\" fill=\"none\" stroke=\"#424242\" stroke-width=\"1\" />\n <!-- 辐条 -->\n <line x1=\"80\" y1=\"120\" x2=\"80\" y2=\"180\" stroke=\"#424242\" stroke-width=\"1\" />\n <line x1=\"50\" y1=\"150\" x2=\"110\" y2=\"150\" stroke=\"#424242\" stroke-width=\"1\" />\n <line x1=\"60\" y1=\"130\" x2=\"100\" y2=\"170\" stroke=\"#424242\" stroke-width=\"1\" />\n <line x1=\"60\" y1=\"170\" x2=\"100\" y2=\"130\" stroke=\"#424242\" stroke-width=\"1\" />\n <!-- 脚踏板 -->\n <circle cx=\"150\" cy=\"150\" r=\"10\" fill=\"#795548\" />\n <rect x=\"140\" y=\"150\" width=\"20\" height=\"5\" fill=\"#757575\" transform=\"rotate(45 150 150)\" />\n <rect x=\"140\" y=\"150\" width=\"20\" height=\"5\" fill=\"#757575\" transform=\"rotate(-45 150 150)\" />\n <!-- 车把 -->\n <line x1=\"190\" y1=\"120\" x2=\"210\" y2=\"100\" stroke=\"#5D4037\" stroke-width=\"4\" />\n <line x1=\"210\" y1=\"100\" x2=\"230\" y2=\"100\" stroke=\"#5D4037\" stroke-width=\"4\" />\n <!-- 车铃 -->\n <circle cx=\"220\" cy=\"95\" r=\"5\" fill=\"#FFC107\" stroke=\"#FF9800\" stroke-width=\"1\" />\n </g>\n \n <!-- 鹈鹕身体 -->\n <g id=\"pelican\">\n <!-- 身体 -->\n <ellipse cx=\"150\" cy=\"80\" rx=\"35\" ry=\"40\" fill=\"#ECEFF1\" stroke=\"#CFD8DC\" stroke-width=\"2\" />\n \n <!-- 头部 -->\n <ellipse cx=\"190\" cy=\"70\" rx=\"25\" ry=\"20\" fill=\"#ECEFF1\" stroke=\"#CFD8DC\" stroke-width=\"2\" />\n \n <!-- 嘴巴（大嘴） -->\n <path d=\"M215 70 C240 65, 260 70, 260 80 C260 90, 240 95, 215 90 Z\" fill=\"#FFAB40\" stroke=\"#FF8F00\" stroke-width=\"2\" />\n <path d=\"M215 75 C235 72, 250 75, 250 80 C250 85, 235 88, 215 85 Z\" fill=\"#FFE0B2\" />\n \n <!-- 眼睛 -->\n <circle cx=\"200\" cy=\"65\" r=\"5\" fill=\"#212121\" />\n <circle cx=\"202\" cy=\"63\" r=\"1.5\" fill=\"#fff\" />\n \n <!-- 翅膀 -->\n <path d=\"M120 60 Q100 40, 90 60 Q100 80, 120 70 Z\" fill=\"#CFD8DC\" stroke=\"#B0BEC5\" stroke-width=\"2\" />\n \n <!-- 腿部（骑车姿势） -->\n <line x1=\"140\" y1=\"120\" x2=\"150\" y2=\"150\" stroke=\"#ECEFF1\" stroke-width=\"6\" stroke-linecap=\"round\" />\n <line x1=\"150\" y1=\"150\" x2=\"160\" y2=\"170\" stroke=\"#ECEFF1\" stroke-width=\"6\" stroke-linecap=\"round\" />\n <line x1=\"160\" y1=\"120\" x2=\"150\" y2=\"150\" stroke=\"#ECEFF1\" stroke-width=\"6\" stroke-linecap=\"round\" />\n \n <!-- 脚踩踏板 -->\n <circle cx=\"140\" cy=\"170\" r=\"5\" fill=\"#757575\" />\n <circle cx=\"160\" cy=\"170\" r=\"5\" fill=\"#757575\" />\n \n <!-- 尾巴 -->\n <path d=\"M115 80 Q90 85, 100 100\" fill=\"none\" stroke=\"#CFD8DC\" stroke-width=\"4\" stroke-linecap=\"round\" />\n </g>\n </svg>\n </div>\n \n <div class=\"road\"></div>\n </div>\n \n <div class=\"controls\">\n <button id=\"startBtn\">开始骑行</button>\n <button id=\"stopBtn\">停止骑行</button>\n <button id=\"reverseBtn\">反向骑行</button>\n \n <div class=\"speed-control\">\n <label for=\"speed\">骑行速度:</label>\n <input type=\"range\" id=\"speed\" min=\"1\" max=\"20\" value=\"10\">\n <span id=\"speedValue\">10</span>\n </div>\n </div>\n </div>\n\n <script>\n const cyclist = document.querySelector('.cyclist-container');\n const road = document.querySelector('.road');\n const startBtn = document.getElementById('startBtn');\n const stopBtn = document.getElementById('stopBtn');\n const reverseBtn = document.getElementById('reverseBtn');\n const speedControl = document.getElementById('speed');\n const speedValue = document.getElementById('speedValue');\n \n let isRiding = true;\n let direction = 1; // 1 for right, -1 for left\n \n function updateAnimation() {\n const speed = speedControl.value;\n speedValue.textContent = speed;\n \n cyclist.style.animation = `ride ${20 - speed}s infinite linear`;\n road.style.animation = `roadMove ${10 - speed/2}s infinite linear`;\n \n if (direction === -1) {\n cyclist.style.transform = `translateX(-50%) scaleX(-1)`;\n } else {\n cyclist.style.transform = `translateX(-50%) scaleX(1)`;\n }\n }\n \n startBtn.addEventListener('click', () => {\n isRiding = true;\n updateAnimation();\n });\n \n stopBtn.addEventListener('click', () => {\n isRiding = false;\n cyclist.style.animationPlayState = 'paused';\n road.style.animationPlayState = 'paused';\n });\n \n reverseBtn.addEventListener('click', () => {\n direction *= -1;\n updateAnimation();\n });\n \n speedControl.addEventListener('input', updateAnimation);\n \n // Initialize\n updateAnimation();\n </script>\n</body>\n</html>"},
"next":["添加更多鸟类动画","增加场景互动元素","优化骑行流畅度","增加天气变化效果"],
"breakpoint":"none"
}
```
角色
assistant
content
total_tokens
8789
summary
创建的鹈鹕SVG插画，包含动态骑行姿态、细节丰富的鹈鹕特征和复古自行车设计
uiParsing
关闭