| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"><head><meta charset="utf-8"><title>Mindmap</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 | .mm{position:relative;margin:30px auto 0;max-width:1200px;height:520px} |
| 9 | .mm .n{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 18px;box-shadow:var(--shadow);font-weight:600} |
| 10 | .mm .root{top:calc(50% - 34px);left:calc(50% - 100px);width:200px;padding:22px;background:var(--accent);color:#fff;border:none;text-align:center;font-size:20px;border-radius:24px} |
| 11 | .mm .n.sm{font-size:13px} |
| 12 | .mm svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} |
| 13 | .mm svg path{stroke:var(--border-strong);stroke-width:1.5;fill:none} |
| 14 | </style> |
| 15 | </head><body class="single"> |
| 16 | <div class="deck"><section class="slide is-active" data-title="Mindmap"> |
| 17 | <p class="kicker">Concept map · 心智图</p> |
| 18 | <h2 class="h2">html-ppt 的知识地图</h2> |
| 19 | <div class="mm"> |
| 20 | <svg class="anim-path-draw" viewBox="0 0 1200 520" preserveAspectRatio="none"> |
| 21 | <path d="M600,260 C400,140 280,100 160,90"/> |
| 22 | <path d="M600,260 C400,380 280,420 160,430"/> |
| 23 | <path d="M600,260 C800,140 920,100 1040,90"/> |
| 24 | <path d="M600,260 C800,380 920,420 1040,430"/> |
| 25 | <path d="M600,260 C600,140 600,100 600,60"/> |
| 26 | <path d="M600,260 C600,380 600,420 600,460"/> |
| 27 | </svg> |
| 28 | <div class="n root">html-ppt</div> |
| 29 | <div class="n" style="top:60px;left:40px">Themes</div> |
| 30 | <div class="n sm" style="top:410px;left:40px">Layouts</div> |
| 31 | <div class="n sm" style="top:60px;right:40px">Animations</div> |
| 32 | <div class="n sm" style="top:410px;right:40px">Runtime</div> |
| 33 | <div class="n sm" style="top:30px;left:calc(50% - 50px)">Tokens</div> |
| 34 | <div class="n sm" style="top:450px;left:calc(50% - 60px)">Render.sh</div> |
| 35 | </div> |
| 36 | </section></div> |
| 37 | <script src="../../assets/runtime.js"></script> |
| 38 | </body></html> |
| 39 |