Original Summary

提示词:“创建一个 HTML，内容是 SVG 绘制一个鹈鹕骑自行车的 2D 动画，你不需要任何测试。”，一次生成，没改过。 模型用的是fable5.1-xhigh <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <title>鹈鹕骑行</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap"> </head> <body> <style> :root { --bg: #eef4f8; --text: #22303c; --muted: #61707d; --panel: #ffffff; --border: #d5dee6; --accent: #d64545; --sky-top: #9fd3f7; --sky-bottom: #e8f6ff; --sun: #ffd35c; --sun-glow: #ffe9a3; --moon-bite: 0; --stars: 0; --cloud: #ffffff; --hill-far: #a9d69a; --hill-near: #6fbd6f; --tree: #3f8f4f; --tree-trunk: #7a5230; --ground: #7cc36b; --grass-fg: #55a457; --road: #5b6170; --road-edge: #8a90a0; --road-line: #f6efc2; --pelican: #fbfaf4; --pelican-edge: #d9d3c2; --shadow: rgba(0, 0, 0, .18); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b1020; --text: #e5e7eb; --muted: #9aa5b4; --panel: #141a2e; --border: #2a3556; --accent: #e25b5b; --sky-top: #0d1733; --sky-bottom: #2a3f6e; --sun: #f4f1dc; --sun-glow: #aebbe3; --moon-bite: 1; --stars: 1; --cloud: #7f8db0; --hill-far: #2b4a52; --hill-near: #223f3a; --tree: #1d3b30; --tree-trunk: #3b2a1e; --ground: #2a4a34; --grass-fg: #1f3b2a; --road: #2b3040; --road-edge: #4a5166; --road-line: #cfc79a; --pelican: #ecebe2; --pelican-edge: #bdb8a8; --shadow: rgba(0, 0, 0, .35); } } :root[data-theme="dark"] { --bg: #0b1020; --text: #e5e7eb; --muted: #9aa5b4; --panel: #141a2e; --border: #2a3556; --accent: #e25b5b; --sky-top: #0d1733; --sky-bottom: #2a3f6e; --sun: #f4f1dc; --sun-glow: #aebbe3; --moon-bite: 1; --stars: 1; --cloud: #7f8db0; --hill-far: #2b4a52; --hill-near: #223f3a; --tree: #1d3b30; --tree-trunk: #3b2a1e; --ground: #2a4a34; --grass-fg: #1f3b2a; --road: #2b3040; --road-edge: #4a5166; --road-line: #cfc79a; --pelican: #ecebe2; --pelican-edge: #bdb8a8; --shadow: rgba(0, 0, 0, .35); } { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; min-height: 100%; } main { max-width: 1080px; margin: 0 auto; padding-block: 24px 40px; padding-inline: 16px; } header { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 14px; } h1 { margin: 0; font-family: "ZCOOL KuaiLe", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; font-weight: 400; font-size: 1.7rem; letter-spacing: .04em; text-wrap: balance; } header p { margin: 0; color: var(--muted); font-size: .9rem; } .stage { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(10, 30, 60, .14); background: var(--sky-bottom); } .stage svg { display: block; width: 100%; height: auto; } .controls { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 14px; } button { font: inherit; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; } button:hover { border-color: var(--accent); } button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; } input[type="range"] { width: 150px; accent-color: var(--accent); } #speedVal { min-width: 3.2em; font-variant-numeric: tabular-nums; color: var(--text); } .hint { color: var(--muted); font-size: .8rem; margin: 10px 0 0; } / --- scene --- */ .sky-top { stop-color: var(--sky-top); } .sky-bottom { stop-color: var(--sky-bottom); } .glow-a { stop-color: var(--sun-glow); stop-opacity: .85; } .glow-b { stop-color: var(--sun-glow); stop-opacity: 0; } .plumage-a { stop-color: var(--pelican); } .plumage-b { stop-color: var(--pelican-edge); } .sun { fill: var(--sun); } .moon-bite { opacity: var(--moon-bite); } .stars { opacity: var(--stars); } .star { fill: #ffffff; animation: twinkle 3s ease-in-out infinite; } @keyframes twinkle { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } .clouds { fill: var(--cloud); opacity: .95; } .hill-far { fill: var(--hill-far); } .hill-near { fill: var(--hill-near); } .tree { fill: var(--tree); } .trunk { fill: var(--tree-trunk); } .ground { fill: var(--ground); } .road { fill: var(--road); } .road-edge { stroke: var(--road-edge); stroke-width: 2; } .road-line { stroke: var(--road-line); stroke-width: 4; stroke-dasharray: 40 40; } .tuft { fill: var(--grass-fg); } .shadow { fill: var(--shadow); } .tire { fill: none; stroke: #2a2a2e; stroke-width: 9; } .rim { fill: none; stroke: #c9cfd8; stroke-width: 3; } .spokes line { stroke: #b6bdc8; stroke-width: 1.6; } .hub { fill: #3b3f47; } .gear { fill: none; stroke: #3b3f47; stroke-width: 4; stroke-dasharray: 3 2.5; } .gear-inner { fill: none; stroke: #3b3f47; stroke-width: 2.5; } .chain { fill: none; stroke: #2f3237; stroke-width: 3; stroke-dasharray: 4 3; } .tube { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; } .headtube { stroke: var(--accent); stroke-width: 10; stroke-linecap: round; } .seatpost { stroke: #4b5563; stroke-width: 5; stroke-linecap: round; } .saddle { fill: #3b2a22; } .bar { fill: none; stroke: #4b5563; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .grip { stroke: #2a2a2e; stroke-width: 8; stroke-linecap: round; } .crank { stroke: #3b3f47; stroke-width: 6; stroke-linecap: round; } .pedal { fill: #23252a; } .leg { fill: none; stroke: #f0a35c; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; } .leg-far { stroke: #c9823f; } .foot { fill: #f0a35c; stroke: #c9823f; stroke-width: 1.5; stroke-linejoin: round; } .foot-far { fill: #c9823f; stroke: #a5672c; } .feather { fill: var(--pelican); stroke: var(--pelican-edge); stroke-w

  • 情报分类：技术学习与提效
  • 分类依据：内容涉及技术、AI、软件工具或工程实践
  • 信息来源：服务器 / LINUX DO - 最新话题
  • 发布时间：2026/9/17 16:01:32