| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>日落暖 / Sunset Warm</title> |
| 7 | <style> |
| 8 | *{margin:0;padding:0;box-sizing:border-box} |
| 9 | html,body{width:100%;height:100%;overflow:hidden} |
| 10 | html{display:grid;place-items:center;background:#0f1117} |
| 11 | body{display:grid;place-items:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:#0f1117} |
| 12 | .slide{position:relative;width:min(100vw,calc(100vh*16/9));aspect-ratio:16/9;overflow:hidden;background:linear-gradient(180deg,#7c2d12 0%,#9a3412 16%,#f97316 44%,#fbbf24 70%,#fed7aa 100%);border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,4vw,48px) clamp(20px,5.5vw,64px)} |
| 13 | .sun{position:absolute;top:12%;right:10%;width:clamp(56px,12vw,150px);height:clamp(56px,12vw,150px);background:radial-gradient(circle,#fbbf24 0%,#f97316 50%,rgba(249,115,22,0) 100%);border-radius:50%} |
| 14 | .halo{position:absolute;top:calc(12% - clamp(12px,2.5vw,30px));right:calc(10% - clamp(12px,2.5vw,30px));width:clamp(80px,17vw,210px);height:clamp(80px,17vw,210px);border:2px solid rgba(251,191,36,.18);border-radius:50%} |
| 15 | .cloud{position:absolute;background:rgba(254,215,170,.13);border-radius:clamp(14px,3vw,40px)} |
| 16 | .c1{top:18%;left:8%;width:clamp(56px,12vw,140px);height:clamp(14px,3vw,34px)} |
| 17 | .c2{top:34%;left:28%;width:clamp(36px,8vw,96px);height:clamp(10px,2.2vw,24px)} |
| 18 | .c3{top:12%;left:50%;width:clamp(44px,10vw,120px);height:clamp(12px,2.5vw,28px)} |
| 19 | .content{position:relative;z-index:1} |
| 20 | .tag{font-family:"SFMono-Regular",Consolas,monospace;font-size:clamp(7px,.95vw,10px);color:rgba(255,255,255,.65);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:clamp(4px,.8vw,10px)} |
| 21 | .title{font-family:Georgia,"Songti SC",serif;font-size:clamp(28px,5.5vw,66px);color:#fff;font-weight:bold;line-height:1.15;margin-bottom:clamp(4px,.8vw,10px);text-shadow:0 2px 10px rgba(124,45,18,.28)} |
| 22 | .desc{font-size:clamp(10px,1.4vw,16px);color:rgba(255,255,255,.85);line-height:1.6;max-width:clamp(160px,34vw,420px)} |
| 23 | .palette{display:flex;gap:clamp(4px,.6vw,7px);margin-top:clamp(8px,1.5vw,18px)} |
| 24 | .sw{width:clamp(12px,1.8vw,20px);height:clamp(12px,1.8vw,20px);border-radius:50%;background:var(--c);border:1px solid rgba(255,255,255,.18)} |
| 25 | </style> |
| 26 | </head> |
| 27 | <body> |
| 28 | <div class="slide"> |
| 29 | <div class="sun"></div> |
| 30 | <div class="halo"></div> |
| 31 | <div class="cloud c1"></div> |
| 32 | <div class="cloud c2"></div> |
| 33 | <div class="cloud c3"></div> |
| 34 | <div class="content"> |
| 35 | <div class="tag">Sunset Warm</div> |
| 36 | <div class="title">日落暖</div> |
| 37 | <div class="desc">橘色珊瑚琥珀三色铺满天际，温度本身就是叙事</div> |
| 38 | <div class="palette"> |
| 39 | <i class="sw" style="--c:#7c2d12"></i> |
| 40 | <i class="sw" style="--c:#9a3412"></i> |
| 41 | <i class="sw" style="--c:#f97316"></i> |
| 42 | <i class="sw" style="--c:#fbbf24"></i> |
| 43 | <i class="sw" style="--c:#fed7aa"></i> |
| 44 | </div> |
| 45 | </div> |
| 46 | </div> |
| 47 | </body> |
| 48 | </html> |
| 49 |