| 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>赛博霓虹 · Cyberpunk Neon</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:#0a0a0a;border-radius:8px} |
| 12 | .grid{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 49px,rgba(6,182,212,.06) 50px),repeating-linear-gradient(90deg,transparent,transparent 49px,rgba(6,182,212,.06) 50px)} |
| 13 | .scanline{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(6,182,212,.15),transparent);top:40%} |
| 14 | .neon-line{position:absolute;height:2px;box-shadow:0 0 8px var(--c),0 0 20px var(--c)} |
| 15 | .nl1{left:8%;right:8%;top:22%;--c:#ec4899} |
| 16 | .nl2{left:8%;right:8%;bottom:30%;--c:#06b6d4} |
| 17 | .corner{position:absolute;width:20px;height:20px;border-color:#ec4899;border-style:solid} |
| 18 | .c1{top:10%;left:6%;border-width:2px 0 0 2px} |
| 19 | .c2{top:10%;right:6%;border-width:2px 2px 0 0} |
| 20 | .c3{bottom:10%;left:6%;border-width:0 0 2px 2px} |
| 21 | .c4{bottom:10%;right:6%;border-width:0 2px 2px 0} |
| 22 | .glitch{position:relative;z-index:2} |
| 23 | .glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%} |
| 24 | .glitch::before{color:#06b6d4;clip-path:inset(0 0 65% 0);transform:translate(3px,-2px)} |
| 25 | .glitch::after{color:#ec4899;clip-path:inset(65% 0 0 0);transform:translate(-3px,2px)} |
| 26 | .content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:3;padding:8%} |
| 27 | h1{font-size:clamp(36px,7vw,80px);font-weight:900;color:#f8fafc;letter-spacing:.05em;text-shadow:0 0 10px rgba(236,72,153,.6),0 0 30px rgba(236,72,153,.3),0 0 60px rgba(6,182,212,.2)} |
| 28 | .desc{margin-top:3%;font-size:clamp(11px,1.5vw,17px);color:#cbd5e1;max-width:65%;line-height:1.6} |
| 29 | .palette{display:flex;gap:clamp(6px,1vw,12px);margin-top:5%} |
| 30 | .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,.1);box-shadow:0 0 15px var(--c)} |
| 31 | .label{margin-top:4%;font-size:clamp(8px,1vw,13px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#cbd5e1;font-family:"SFMono-Regular",Consolas,monospace} |
| 32 | .label b{color:#ec4899;font-weight:400} |
| 33 | @media(max-aspect-ratio:16/9){.slide{width:min(100vw,calc(100vh*16/9));height:auto}} |
| 34 | @media(min-aspect-ratio:16/9){.slide{height:min(100vh,calc(100vw*9/16));width:auto}} |
| 35 | </style> |
| 36 | </head> |
| 37 | <body> |
| 38 | <div class="slide" aria-label="赛博霓虹 style preview"> |
| 39 | <div class="grid"></div> |
| 40 | <div class="scanline"></div> |
| 41 | <div class="neon-line nl1"></div> |
| 42 | <div class="neon-line nl2"></div> |
| 43 | <div class="corner c1"></div> |
| 44 | <div class="corner c2"></div> |
| 45 | <div class="corner c3"></div> |
| 46 | <div class="corner c4"></div> |
| 47 | <div class="content"> |
| 48 | <h1 class="glitch" data-text="赛博霓虹">赛博霓虹</h1> |
| 49 | <p class="desc">霓虹粉青撕裂纯黑夜幕，未来已来且不问你是否准备好</p> |
| 50 | <div class="palette"> |
| 51 | <i style="--c:#f8fafc"></i> |
| 52 | <i style="--c:#cbd5e1"></i> |
| 53 | <i style="--c:#ec4899"></i> |
| 54 | <i style="--c:#06b6d4"></i> |
| 55 | <i style="--c:#1a1a2e"></i> |
| 56 | </div> |
| 57 | <div class="label"><b>></b> cyberpunk-neon</div> |
| 58 | </div> |
| 59 | </div> |
| 60 | </body> |
| 61 | </html> |
| 62 |