2. Linux.do
  3. 使用 opencode 的 Ox Alpha 模型 画个鹈鹕 效果不错

使用 opencode 的 Ox Alpha 模型 画个鹈鹕 效果不错

code01 2026-08-24 15:09 1




提示词:


创建一个HTML，内容是 SVG绘制一个鹈鹕骑自行车的 2D动画。
最新回复 (4)
  • 好好吃飯 08-24 17:54
    1楼

    佬友，试试这个：生成html，Generate an SVG of a frog with a Habsburg jaw，不用进行测试

  • code01 楼主 08-24 19:44
    2楼



    拉完了 ^-^

  • ruixuey 08-24 20:59
    3楼 
    <!doctype html>
    
<html lang="zh-CN">
    
<head>
    
  <meta charset="utf-8">
    
  <meta name="viewport" content="width=device-width, initial-scale=1">
    
  <meta name="theme-color" content="#bce8ec">
    
  <title>鹈鹕的晨间骑行</title>
    
  <style>
    
    :root {
    
      --sky: #bce8ec;
    
      --ink: #17323a;
    
      --cream: #fff8e8;
    
      --coral: #ef704c;
    
      --coral-dark: #b94431;
    
      --sea: #3a9ba4;
    
      --road: #eed6ac;
    
      --sun: #ffd267;
    
      --motion-state: running;
    
    }
    

    
    * { box-sizing: border-box; }
    

    
    html, body { min-height: 100%; }
    

    
    body {
    
      margin: 0;
    
      display: grid;
    
      place-items: center;
    
      overflow: hidden;
    
      color: var(--ink);
    
      background: var(--sky);
    
      font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
    
    }
    

    
    ::selection { color: var(--cream); background: var(--coral-dark); }
    

    
    .scene {
    
      position: relative;
    
      width: 100vw;
    
      height: 100svh;
    
      min-height: 420px;
    
      isolation: isolate;
    
      background: var(--sky);
    
    }
    

    
    .scene svg { display: block; width: 100%; height: 100%; }
    

    
    .title-block {
    
      position: absolute;
    
      z-index: 5;
    
      top: clamp(24px, 5vw, 64px);
    
      left: clamp(24px, 6vw, 88px);
    
      max-width: min(420px, 54vw);
    
      pointer-events: none;
    
    }
    

    
    h1 {
    
      margin: 0;
    
      max-width: 8ch;
    
      color: var(--ink);
    
      font-family: "Baskerville", "Songti SC", serif;
    
      font-size: clamp(2.2rem, 6.4vw, 5.8rem);
    
      font-weight: 700;
    
      letter-spacing: -0.035em;
    
      line-height: .88;
    
      text-wrap: balance;
    
    }
    

    
    .title-block p {
    
      margin: 18px 0 0;
    
      font-size: clamp(.78rem, 1.15vw, 1rem);
    
      font-weight: 700;
    
      letter-spacing: .14em;
    
    }
    

    
    .controls {
    
      position: absolute;
    
      z-index: 10;
    
      right: clamp(18px, 3vw, 38px);
    
      bottom: clamp(18px, 3vw, 34px);
    
      display: flex;
    
      align-items: center;
    
      gap: 14px;
    
    }
    

    
    button {
    
      display: inline-flex;
    
      align-items: center;
    
      gap: 10px;
    
      min-height: 46px;
    
      padding: 0 18px;
    
      border: 0;
    
      border-radius: 999px;
    
      color: var(--cream);
    
      background: var(--ink);
    
      box-shadow: 0 10px 24px rgb(23 50 58 / 22%);
    
      font: inherit;
    
      font-size: .88rem;
    
      font-weight: 800;
    
      cursor: pointer;
    
      transition: transform 180ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out;
    
    }
    

    
    button:hover { transform: translateY(-2px); background: var(--coral-dark); box-shadow: 0 12px 28px rgb(23 50 58 / 28%); }
    
    button:active { transform: translateY(0); }
    
    button:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
    

    
    .control-icon { width: 12px; height: 14px; position: relative; }
    
    .control-icon::before,
    
    .control-icon::after {
    
      content: "";
    
      position: absolute;
    
      inset-block: 0;
    
      width: 4px;
    
      border-radius: 2px;
    
      background: currentColor;
    
    }
    
    .control-icon::before { left: 0; }
    
    .control-icon::after { right: 0; }
    
    [data-paused="true"] .control-icon::before { width: 0; }
    
    [data-paused="true"] .control-icon::after {
    
      right: auto;
    
      left: 1px;
    
      width: 0;
    
      height: 0;
    
      border-top: 7px solid transparent;
    
      border-bottom: 7px solid transparent;
    
      border-left: 11px solid currentColor;
  • ruixuey 08-24 20:59
    4楼

    不会发html，我以为代码段能渲染出来那 ^-^

* 帖子来源Linux.do
附近帖子
返回
飞读
随机推荐