| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"><head><meta charset="utf-8"><title>Image Hero</title> |
| 3 | <link rel="stylesheet" href="../../assets/fonts.css"> |
| 4 | <link rel="stylesheet" href="../../assets/base.css"> |
| 5 | <link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css"> |
| 6 | <link rel="stylesheet" href="../../assets/animations/animations.css"> |
| 7 | <style> |
| 8 | .hero{position:relative;height:calc(100vh - 144px);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)} |
| 9 | .hero .bg{position:absolute;inset:0;background: |
| 10 | radial-gradient(80% 60% at 30% 40%,#ffb38a,transparent 70%), |
| 11 | radial-gradient(70% 50% at 75% 60%,#c084fc,transparent 70%), |
| 12 | linear-gradient(135deg,#0b1024,#1a2238)} |
| 13 | .hero .bg.kb{animation:kf-kenburns 12s ease-in-out infinite alternate} |
| 14 | .hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,12,20,.65));} |
| 15 | .hero .caption{position:absolute;bottom:48px;left:56px;right:56px;color:#fff;z-index:2} |
| 16 | .hero h1{font-size:72px;line-height:1;font-weight:800;letter-spacing:-.03em;margin:0} |
| 17 | .hero p{font-size:20px;opacity:.85;margin:14px 0 0;max-width:60ch} |
| 18 | .hero .pill{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2)} |
| 19 | </style> |
| 20 | </head><body class="single"> |
| 21 | <div class="deck"><section class="slide is-active" data-title="Image Hero" style="padding:56px"> |
| 22 | <div class="hero"> |
| 23 | <div class="bg kb"></div> |
| 24 | <div class="overlay"></div> |
| 25 | <div class="caption"> |
| 26 | <span class="pill">Cover · 04</span> |
| 27 | <h1 class="mt-s anim-rise-in" data-anim="rise-in">像杂志一样的<br>封面画面感</h1> |
| 28 | <p>Ken Burns 缓慢推拉 + 径向渐变 + 中灰叠加。无须真实图片，也能做出高级感。</p> |
| 29 | </div> |
| 30 | </div> |
| 31 | </section></div> |
| 32 | <script src="../../assets/runtime.js"></script> |
| 33 | </body></html> |
| 34 |