39 lines
2.1 KiB
HTML
39 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN"><head><meta charset="utf-8"><title>Mindmap</title>
|
|
<link rel="stylesheet" href="../../assets/fonts.css">
|
|
<link rel="stylesheet" href="../../assets/base.css">
|
|
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
|
|
<link rel="stylesheet" href="../../assets/animations/animations.css">
|
|
<style>
|
|
.mm{position:relative;margin:30px auto 0;max-width:1200px;height:520px}
|
|
.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}
|
|
.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}
|
|
.mm .n.sm{font-size:13px}
|
|
.mm svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
|
|
.mm svg path{stroke:var(--border-strong);stroke-width:1.5;fill:none}
|
|
</style>
|
|
</head><body class="single">
|
|
<div class="deck"><section class="slide is-active" data-title="Mindmap">
|
|
<p class="kicker">Concept map · 心智图</p>
|
|
<h2 class="h2">html-ppt 的知识地图</h2>
|
|
<div class="mm">
|
|
<svg class="anim-path-draw" viewBox="0 0 1200 520" preserveAspectRatio="none">
|
|
<path d="M600,260 C400,140 280,100 160,90"/>
|
|
<path d="M600,260 C400,380 280,420 160,430"/>
|
|
<path d="M600,260 C800,140 920,100 1040,90"/>
|
|
<path d="M600,260 C800,380 920,420 1040,430"/>
|
|
<path d="M600,260 C600,140 600,100 600,60"/>
|
|
<path d="M600,260 C600,380 600,420 600,460"/>
|
|
</svg>
|
|
<div class="n root">html-ppt</div>
|
|
<div class="n" style="top:60px;left:40px">Themes</div>
|
|
<div class="n sm" style="top:410px;left:40px">Layouts</div>
|
|
<div class="n sm" style="top:60px;right:40px">Animations</div>
|
|
<div class="n sm" style="top:410px;right:40px">Runtime</div>
|
|
<div class="n sm" style="top:30px;left:calc(50% - 50px)">Tokens</div>
|
|
<div class="n sm" style="top:450px;left:calc(50% - 60px)">Render.sh</div>
|
|
</div>
|
|
</section></div>
|
|
<script src="../../assets/runtime.js"></script>
|
|
</body></html>
|