| 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>磨砂玻璃 · Glassmorphism</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(135deg,#4f46e5 0%,#7c3aed 25%,#06b6d4 50%,#818cf8 75%,#a78bfa 100%);border-radius:8px} |
| 12 | .blob{position:absolute;border-radius:50%;filter:blur(40px)} |
| 13 | .bl1{width:45%;height:50%;left:5%;top:-5%;background:rgba(129,140,248,.8)} |
| 14 | .bl2{width:40%;height:45%;right:0;bottom:5%;background:rgba(6,182,212,.7)} |
| 15 | .bl3{width:35%;height:35%;left:35%;top:40%;background:rgba(199,210,254,.5)} |
| 16 | .glass{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70%;padding:6% 8%;background:rgba(255,255,255,.18);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:24px;border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;text-align:center;z-index:2} |
| 17 | h1{font-size:clamp(32px,6vw,68px);font-weight:900;color:#fff;letter-spacing:.02em;text-shadow:0 2px 10px rgba(0,0,0,.15)} |
| 18 | .desc{margin-top:3%;font-size:clamp(10px,1.4vw,16px);color:rgba(255,255,255,.9);max-width:80%;line-height:1.6} |
| 19 | .divider{width:50px;height:3px;margin:4% 0;background:rgba(255,255,255,.4);border-radius:3px} |
| 20 | .palette{display:flex;gap:clamp(6px,1vw,12px)} |
| 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,.2);box-shadow:0 4px 15px rgba(0,0,0,.2)} |
| 22 | .label{margin-top:4%;font-size:clamp(8px,1vw,13px);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)} |
| 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="blob bl1"></div> |
| 30 | <div class="blob bl2"></div> |
| 31 | <div class="blob bl3"></div> |
| 32 | <div class="glass"> |
| 33 | <h1>磨砂玻璃</h1> |
| 34 | <div class="divider"></div> |
| 35 | <p class="desc">磨砂玻璃后光斑流转，Apple 发布会的光影魔术</p> |
| 36 | <div class="palette"> |
| 37 | <i style="--c:#0f172a"></i> |
| 38 | <i style="--c:#334155"></i> |
| 39 | <i style="--c:#818cf8"></i> |
| 40 | <i style="--c:#06b6d4"></i> |
| 41 | <i style="--c:#c7d2fe"></i> |
| 42 | </div> |
| 43 | <div class="label">glassmorphism</div> |
| 44 | </div> |
| 45 | </div> |
| 46 | </body> |
| 47 | </html> |
| 48 |