| 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>极光 · Aurora</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:#0a0a1a;border-radius:8px;box-shadow:0 0 60px rgba(79,70,229,.25)} |
| 12 | .aurora{position:absolute;inset:0;overflow:hidden} |
| 13 | .a1,.a2,.a3,.a4,.a5{position:absolute;border-radius:50%;filter:blur(60px);opacity:.7} |
| 14 | .a1{width:55%;height:60%;left:-10%;top:-15%;background:radial-gradient(circle,rgba(6,182,212,.8),rgba(6,182,212,0) 70%)} |
| 15 | .a2{width:50%;height:55%;right:-5%;top:5%;background:radial-gradient(circle,rgba(79,70,229,.85),rgba(79,70,229,0) 70%)} |
| 16 | .a3{width:45%;height:50%;left:20%;bottom:-10%;background:radial-gradient(circle,rgba(167,243,208,.6),rgba(167,243,208,0) 70%)} |
| 17 | .a4{width:40%;height:40%;right:10%;bottom:5%;background:radial-gradient(circle,rgba(49,46,129,.9),rgba(49,46,129,0) 70%)} |
| 18 | .a5{width:60%;height:35%;left:10%;top:30%;background:radial-gradient(ellipse,rgba(167,139,250,.5),transparent 70%)} |
| 19 | .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,26,.2) 0%,rgba(10,10,26,.5) 100%)} |
| 20 | .content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:2;padding:8%} |
| 21 | h1{font-size:clamp(36px,7vw,80px);font-weight:900;color:#fff;letter-spacing:.02em;text-shadow:0 0 40px rgba(6,182,212,.5),0 0 80px rgba(79,70,229,.3);line-height:1.1} |
| 22 | .desc{margin-top:3%;font-size:clamp(11px,1.6vw,18px);color:rgba(255,255,255,.75);max-width:70%;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(255,255,255,.15);box-shadow:0 0 20px var(--c)} |
| 25 | .label{margin-top:4%;font-size:clamp(8px,1vw,13px);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)} |
| 26 | .divider{width:60px;height:2px;margin:3% auto 0;background:linear-gradient(90deg,transparent,rgba(167,243,208,.6),transparent)} |
| 27 | @media(max-aspect-ratio:16/9){.slide{width:min(100vw,calc(100vh*16/9));height:auto}} |
| 28 | @media(min-aspect-ratio:16/9){.slide{height:min(100vh,calc(100vw*9/16));width:auto}} |
| 29 | </style> |
| 30 | </head> |
| 31 | <body> |
| 32 | <div class="slide" aria-label="极光 style preview"> |
| 33 | <div class="aurora"> |
| 34 | <div class="a1"></div> |
| 35 | <div class="a2"></div> |
| 36 | <div class="a3"></div> |
| 37 | <div class="a4"></div> |
| 38 | <div class="a5"></div> |
| 39 | </div> |
| 40 | <div class="overlay"></div> |
| 41 | <div class="content"> |
| 42 | <h1>极光</h1> |
| 43 | <div class="divider"></div> |
| 44 | <p class="desc">极光渐变融化在blur里，封面页天生就该这样梦幻</p> |
| 45 | <div class="palette"> |
| 46 | <i style="--c:#1e1b4b"></i> |
| 47 | <i style="--c:#312e81"></i> |
| 48 | <i style="--c:#4f46e5"></i> |
| 49 | <i style="--c:#06b6d4"></i> |
| 50 | <i style="--c:#a7f3d0"></i> |
| 51 | </div> |
| 52 | <div class="label">aurora</div> |
| 53 | </div> |
| 54 | </div> |
| 55 | </body> |
| 56 | </html> |
| 57 |