| 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>Y2K 铬 · Y2K Chrome</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(160deg,#b0b0b0 0%,#e8e8e8 15%,#c0c0c0 30%,#f0f0f0 45%,#a8a8a8 55%,#d8d8d8 70%,#b8b8b8 85%,#e5e5e5 100%);border-radius:8px} |
| 12 | .chrome-shine{position:absolute;inset:0;background:linear-gradient(125deg,transparent 20%,rgba(255,255,255,.6) 35%,transparent 45%,transparent 55%,rgba(255,255,255,.3) 65%,transparent 75%)} |
| 13 | .rainbow-bar{position:absolute;left:8%;right:8%;top:18%;height:4px;background:linear-gradient(90deg,#ef4444,#f97316,#eab308,#22c55e,#06b6d4,#8b5cf6,#ec4899);border-radius:4px;box-shadow:0 0 20px rgba(168,85,247,.4)} |
| 14 | .bubble{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.5),rgba(255,255,255,.05))} |
| 15 | .b1{width:clamp(60px,10vw,120px);height:clamp(60px,10vw,120px);right:10%;top:12%} |
| 16 | .b2{width:clamp(35px,6vw,70px);height:clamp(35px,6vw,70px);right:25%;top:35%} |
| 17 | .b3{width:clamp(45px,8vw,90px);height:clamp(45px,8vw,90px);left:8%;bottom:20%} |
| 18 | .b4{width:clamp(25px,4vw,50px);height:clamp(25px,4vw,50px);right:15%;bottom:28%} |
| 19 | .b5{width:clamp(55px,9vw,100px);height:clamp(55px,9vw,100px);left:25%;top:30%;background:radial-gradient(circle at 40% 30%,rgba(168,85,247,.2),rgba(6,182,212,.1),transparent)} |
| 20 | .content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;z-index:2;padding:8% 8% 8% 10%} |
| 21 | h1{font-size:clamp(36px,7vw,80px);font-weight:900;color:#171717;letter-spacing:.02em;background:linear-gradient(180deg,#171717 40%,#404040 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} |
| 22 | .desc{margin-top:3%;font-size:clamp(11px,1.5vw,17px);color:#404040;max-width:55%;line-height:1.6} |
| 23 | .palette{display:flex;gap:clamp(6px,1vw,12px);margin-top:5%} |
| 24 | .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(0,0,0,.1);box-shadow:inset 0 -3px 6px rgba(0,0,0,.15),inset 0 3px 6px rgba(255,255,255,.6)} |
| 25 | .label{margin-top:4%;font-size:clamp(8px,1vw,13px);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#a855f7} |
| 26 | @media(max-aspect-ratio:16/9){.slide{width:min(100vw,calc(100vh*16/9));height:auto}} |
| 27 | @media(min-aspect-ratio:16/9){.slide{height:min(100vh,calc(100vw*9/16));width:auto}} |
| 28 | </style> |
| 29 | </head> |
| 30 | <body> |
| 31 | <div class="slide" aria-label="Y2K 铬 style preview"> |
| 32 | <div class="chrome-shine"></div> |
| 33 | <div class="rainbow-bar"></div> |
| 34 | <div class="bubble b1"></div> |
| 35 | <div class="bubble b2"></div> |
| 36 | <div class="bubble b3"></div> |
| 37 | <div class="bubble b4"></div> |
| 38 | <div class="bubble b5"></div> |
| 39 | <div class="content"> |
| 40 | <h1>Y2K 铬</h1> |
| 41 | <p class="desc">银铬反射彩虹光斑，千禧年的未来主义从未过时</p> |
| 42 | <div class="palette"> |
| 43 | <i style="--c:#171717"></i> |
| 44 | <i style="--c:#404040"></i> |
| 45 | <i style="--c:#a855f7"></i> |
| 46 | <i style="--c:#06b6d4"></i> |
| 47 | <i style="--c:#e5e5e5"></i> |
| 48 | </div> |
| 49 | <div class="label">y2k-chrome</div> |
| 50 | </div> |
| 51 | </div> |
| 52 | </body> |
| 53 | </html> |
| 54 |