| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | <title>蒸汽波 · Vaporwave</title> |
| 7 | <style> |
| 8 | *{box-sizing:border-box;margin:0} |
| 9 | html,body{width:100%;height:100%;overflow:hidden;background:#0f1117} |
| 10 | body{display:grid;place-items:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif} |
| 11 | .slide{position:relative;width:min(100vw,calc(100vh*16/9));aspect-ratio:16/9;overflow:hidden;background:linear-gradient(180deg,#1a0533 0%,#2e1065 25%,#581c87 45%,#ec4899 65%,#f97316 78%,#fbbf24 90%,#22d3ee 100%);border-radius:8px} |
| 12 | .sun{position:absolute;left:50%;bottom:32%;transform:translateX(-50%);width:clamp(120px,22vw,260px);height:clamp(120px,22vw,260px);border-radius:50%;background:linear-gradient(180deg,#fbbf24 0%,#f97316 40%,#ec4899 100%);box-shadow:0 0 60px rgba(251,191,36,.4),0 0 120px rgba(236,72,153,.2)} |
| 13 | .sun::after{content:"";position:absolute;left:5%;right:5%;top:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 8px,#2e1065 8px,#2e1065 10px);border-radius:50%} |
| 14 | .horizon{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,rgba(46,16,101,.0),#2e1065)} |
| 15 | .pgrid{position:absolute;left:0;right:0;bottom:0;height:30%;perspective:300px;overflow:hidden} |
| 16 | .pgrid-inner{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(34,211,238,.15) 0px,transparent 1px,transparent 60px),repeating-linear-gradient(0deg,rgba(236,72,153,.12) 0px,transparent 1px,transparent 30px);transform:rotateX(45deg);transform-origin:bottom} |
| 17 | .content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;z-index:2;padding:8% 8% 0} |
| 18 | h1{font-size:clamp(36px,7vw,80px);font-weight:900;color:#f8fafc;letter-spacing:.08em;text-shadow:0 0 30px rgba(236,72,153,.6),0 0 60px rgba(34,211,238,.3),3px 3px 0 rgba(236,72,153,.5),-2px -2px 0 rgba(34,211,238,.5)} |
| 19 | .desc{margin-top:2%;font-size:clamp(11px,1.5vw,17px);color:rgba(248,250,252,.8);max-width:65%;line-height:1.6} |
| 20 | .palette{display:flex;gap:clamp(6px,1vw,12px);margin-top:3%} |
| 21 | .palette i{display:block;width:clamp(18px,2.8vw,32px);height:clamp(18px,2.8vw,32px);border-radius:50%;background:var(--c);border:2px solid rgba(255,255,255,.15);box-shadow:0 0 15px var(--c)} |
| 22 | .label{margin-top:2%;font-size:clamp(8px,1vw,13px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(248,250,252,.5)} |
| 23 | @media(max-aspect-ratio:16/9){.slide{width:min(100vw,calc(100vh*16/9));height:auto}} |
| 24 | @media(min-aspect-ratio:16/9){.slide{height:min(100vh,calc(100vw*9/16));width:auto}} |
| 25 | </style> |
| 26 | </head> |
| 27 | <body> |
| 28 | <div class="slide" aria-label="蒸汽波 style preview"> |
| 29 | <div class="sun"></div> |
| 30 | <div class="horizon"></div> |
| 31 | <div class="pgrid"><div class="pgrid-inner"></div></div> |
| 32 | <div class="content"> |
| 33 | <h1>蒸汽波</h1> |
| 34 | <p class="desc">深紫渐变中粉红与青蓝晕染，怀旧美学抵达意识深处</p> |
| 35 | <div class="palette"> |
| 36 | <i style="--c:#f8fafc"></i> |
| 37 | <i style="--c:#e2e8f0"></i> |
| 38 | <i style="--c:#ec4899"></i> |
| 39 | <i style="--c:#22d3ee"></i> |
| 40 | <i style="--c:#2e1065"></i> |
| 41 | </div> |
| 42 | <div class="label">v a p o r w a v e</div> |
| 43 | </div> |
| 44 | </div> |
| 45 | </body> |
| 46 | </html> |
| 47 |