Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>红色上衣</title> | |
| <style> | |
| :root { | |
| --bg: #0b1020; | |
| --shirt: #e11d48; | |
| --shirt-dark: #be123c; | |
| --shirt-light: #fb7185; | |
| --stitch: rgba(255, 255, 255, 0.22); | |
| --shadow: rgba(0, 0, 0, 0.35); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| display: grid; | |
| place-items: center; | |
| background: radial-gradient(900px 520px at 50% 35%, rgba(255, 255, 255, 0.08), transparent 60%), | |
| linear-gradient(180deg, #0b1020, #070a14); | |
| color: rgba(255, 255, 255, 0.88); | |
| font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", Arial, sans-serif; | |
| } | |
| .stage { | |
| width: min(520px, calc(100vw - 32px)); | |
| padding: 28px 22px 26px; | |
| border-radius: 18px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45); | |
| } | |
| .title { | |
| margin: 0 0 18px; | |
| font-size: 16px; | |
| font-weight: 650; | |
| letter-spacing: 0.02em; | |
| } | |
| .shirt-wrap { | |
| display: grid; | |
| place-items: center; | |
| padding: 10px 0 2px; | |
| } | |
| .shirt { | |
| width: min(320px, calc(100vw - 120px)); | |
| aspect-ratio: 1 / 1; | |
| position: relative; | |
| filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.45)); | |
| } | |
| .torso { | |
| position: absolute; | |
| left: 50%; | |
| top: 54%; | |
| transform: translate(-50%, -50%); | |
| width: 58%; | |
| height: 62%; | |
| background: linear-gradient(180deg, var(--shirt) 0%, var(--shirt-dark) 100%); | |
| border-radius: 22px 22px 18px 18px; | |
| box-shadow: inset 0 -16px 24px rgba(0, 0, 0, 0.18), inset 0 12px 18px rgba(255, 255, 255, 0.08); | |
| overflow: hidden; | |
| } | |
| .torso::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(120px 150px at 28% 30%, rgba(255, 255, 255, 0.16), transparent 65%), | |
| radial-gradient(120px 160px at 76% 36%, rgba(255, 255, 255, 0.08), transparent 62%), | |
| linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.14) 50%, transparent 100%); | |
| opacity: 0.95; | |
| pointer-events: none; | |
| } | |
| .hem { | |
| position: absolute; | |
| left: 10%; | |
| right: 10%; | |
| bottom: 10%; | |
| height: 0; | |
| border-bottom: 2px dashed var(--stitch); | |
| opacity: 0.95; | |
| } | |
| .sleeve { | |
| position: absolute; | |
| top: 44%; | |
| width: 36%; | |
| height: 28%; | |
| background: linear-gradient(180deg, var(--shirt) 0%, var(--shirt-dark) 100%); | |
| border-radius: 22px; | |
| } | |
| .sleeve.left { | |
| left: 13%; | |
| transform: translate(-50%, -50%) rotate(-18deg); | |
| transform-origin: right center; | |
| } | |
| .sleeve.right { | |
| right: 13%; | |
| transform: translate(50%, -50%) rotate(18deg); | |
| transform-origin: left center; | |
| } | |
| .sleeve::after { | |
| content: ""; | |
| position: absolute; | |
| left: 14%; | |
| right: 14%; | |
| bottom: 14%; | |
| height: 0; | |
| border-bottom: 2px dashed var(--stitch); | |
| } | |
| .neck { | |
| position: absolute; | |
| left: 50%; | |
| top: 28%; | |
| transform: translate(-50%, -50%); | |
| width: 38%; | |
| height: 22%; | |
| background: linear-gradient(180deg, var(--shirt-light) 0%, var(--shirt) 60%, var(--shirt-dark) 100%); | |
| border-radius: 0 0 32px 32px; | |
| box-shadow: inset 0 -10px 16px rgba(0, 0, 0, 0.18); | |
| } | |
| .neck::before { | |
| content: ""; | |
| position: absolute; | |
| left: 50%; | |
| top: 44%; | |
| transform: translate(-50%, -50%); | |
| width: 62%; | |
| height: 68%; | |
| background: radial-gradient(70px 52px at 50% 18%, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.55)); | |
| border-radius: 0 0 40px 40px; | |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); | |
| } | |
| .seam { | |
| position: absolute; | |
| left: 50%; | |
| top: 54%; | |
| transform: translate(-50%, -50%); | |
| width: 0; | |
| height: 42%; | |
| border-left: 2px dashed var(--stitch); | |
| opacity: 0.9; | |
| } | |
| .tag { | |
| position: absolute; | |
| left: 50%; | |
| top: 44%; | |
| transform: translate(-50%, -50%); | |
| width: 18%; | |
| height: 10%; | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.08); | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| box-shadow: inset 0 8px 14px rgba(255, 255, 255, 0.06); | |
| } | |
| .tag::after { | |
| content: ""; | |
| position: absolute; | |
| left: 20%; | |
| right: 20%; | |
| top: 52%; | |
| height: 0; | |
| border-top: 1px solid rgba(255, 255, 255, 0.18); | |
| } | |
| .caption { | |
| margin: 14px 0 0; | |
| font-size: 12px; | |
| line-height: 1.6; | |
| color: rgba(255, 255, 255, 0.72); | |
| } | |
| .swatch { | |
| display: inline-flex; | |
| gap: 10px; | |
| align-items: center; | |
| margin-top: 10px; | |
| font-size: 12px; | |
| color: rgba(255, 255, 255, 0.72); | |
| } | |
| .dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: var(--shirt); | |
| box-shadow: 0 6px 16px rgba(225, 29, 72, 0.4); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="stage"> | |
| <h1 class="title">红色上衣（纯 HTML + CSS）</h1> | |
| <section class="shirt-wrap" aria-label="红色上衣示意图"> | |
| <div class="shirt" role="img" aria-label="红色上衣"> | |
| <div class="sleeve left"></div> | |
| <div class="sleeve right"></div> | |
| <div class="torso"> | |
| <div class="hem"></div> | |
| </div> | |
| <div class="neck"></div> | |
| <div class="seam"></div> | |
| <div class="tag"></div> | |
| </div> | |
| </section> | |
| <p class="caption"> | |
| 你可以直接改 <code>--shirt</code> / <code>--shirt-dark</code> / <code>--shirt-light</code> 三个 CSS 变量来换颜色或调整质感。 | |
| </p> | |
| <div class="swatch" aria-label="颜色标识"> | |
| <span class="dot" aria-hidden="true"></span> | |
| <span>主色：#e11d48</span> | |
| </div> | |
| </main> | |
| </body> | |
| </html> | |