69 lines
3.4 KiB
HTML
69 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>修改记录动画 demo</title>
|
||
<link rel="stylesheet" href="/site-assets/astrion-avatar.css" />
|
||
<link rel="stylesheet" href="/site-assets/anim3-demo.css" />
|
||
</head>
|
||
<body>
|
||
|
||
<div class="stage">
|
||
<p class="hint">自动播放；点击场景重播。</p>
|
||
|
||
<div class="anim3-window" id="anim3Window">
|
||
<div class="anim3-stage" id="anim3Stage">
|
||
|
||
<!-- 智能体（右上），初始持笔 -->
|
||
<div class="writer" id="writer">
|
||
<span class="writer-avatar" id="writerAvatar"></span>
|
||
</div>
|
||
|
||
<!-- 笔：外层 pen-pos 由 JS 定位笔尖，内层 svg 绕笔尖摇摆 -->
|
||
<div class="pen-pos" id="penPos">
|
||
<svg class="writer-pen" id="writerPen" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path fill="var(--bg-1)" d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
|
||
<path d="m15 5 4 4" />
|
||
<circle id="penNibRef" class="pen-ref" cx="2.65" cy="21.02" r="0.7" />
|
||
<circle id="penEraserRef" class="pen-ref" cx="19.2" cy="4.8" r="0.7" />
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 3D 倾斜的纸：四条横线代表四行内容 -->
|
||
<div class="paper3d" id="paper">
|
||
<div class="paper-sheet">
|
||
<div class="pline" data-w="82"><i class="pline-end"></i></div>
|
||
<div class="pline" data-w="64"><i class="pline-end"></i></div>
|
||
<div class="pline" data-w="71"><i class="pline-end"></i></div>
|
||
<div class="pline" data-w="58"><i class="pline-end"></i></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 收件箱（diff 正下方）：后壁在纸后、前壁在纸前，纸从中间沉入。
|
||
两个 svg 直接放 stage 层（不包容器），z-index 才能与纸比较 -->
|
||
<svg class="inbox-part box-back is-shown" id="boxBack" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M2 12 L5.45 5.11 A2 2 0 0 1 7.24 4 H16.76 a2 2 0 0 1 1.79 1.11 L22 12" />
|
||
</svg>
|
||
<!-- 前壁：单条闭合 path，顶部边缘走凹口轮廓（fill 遮挡面积 = 真实盒身，凹口可透纸带） -->
|
||
<svg class="inbox-part box-front is-shown" id="boxFront" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M2 12 h6 l2 3 h4 l2 -3 h6 v6 a2 2 0 0 1 -2 2 H4 a2 2 0 0 1 -2 -2 z" />
|
||
</svg>
|
||
|
||
<!-- diff 区：抽出的绿行展开为红绿 +/- 实际代码 -->
|
||
<div class="diff-view" id="diffView">
|
||
<div class="dline is-del"><span class="dsign">-</span><span class="dtext">theme: 'dark'</span></div>
|
||
<div class="dline is-add"><span class="dsign">+</span><span class="dtext">theme: 'classic'</span></div>
|
||
<div class="dline is-del"><span class="dsign">-</span><span class="dtext">fontSize: 13, lineHeight: 1.4</span></div>
|
||
<div class="dline is-add"><span class="dsign">+</span><span class="dtext">fontSize: 14, lineHeight: 1.6</span></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/site-assets/astrion-avatar.js"></script>
|
||
<script src="/site-assets/anim3-demo.js"></script>
|
||
</body>
|
||
</html>
|