JOJO
39a7a5fc6f
- website-content/：官网 10 篇文档内容 + README - website-design/：官网设计稿、动画实验、预览图与资源 - 根目录官网截图两张 - .gitignore 忽略 website-design/exp/static/dist 构建产物（7.1MB）
302 lines
10 KiB
CSS
302 lines
10 KiB
CSS
/* 修改记录动画 —— 模块样式（主页 feature 行 / anim3-demo 页共用）
|
||
无边框无底色，融于星空；无 glow。token（--text-1 等）由宿主页面提供；
|
||
动画私有的三个色定义在 .anim3-window 作用域。 */
|
||
|
||
.anim3-window {
|
||
--danger: #d47b6b; /* diff 删除行红，仅本动画作用域 */
|
||
/* 收盒文件：与编辑中的 3D 纸同款底色，边框用更亮的白边（叠放分层清晰） */
|
||
--file-paper: var(--bg-panel);
|
||
--file-line: rgba(238, 240, 246, 0.35);
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 舞台：固定 540×380 逻辑尺寸，JS 按容器等比缩放居中（transform: translate+scale） */
|
||
.anim3-stage {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 540px;
|
||
height: 380px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
user-select: none; /* 演示区禁止选中文本，避免鼠标划过时出现系统选中高亮（黑光） */
|
||
-webkit-user-select: none;
|
||
}
|
||
|
||
/* ───────── 智能体（右上） ───────── */
|
||
|
||
/* 尺寸与 04 版本控制的智能体一致（70×70） */
|
||
.writer {
|
||
position: absolute;
|
||
right: 58px;
|
||
top: 26px;
|
||
width: 70px;
|
||
height: 70px;
|
||
}
|
||
.writer-avatar {
|
||
display: block;
|
||
width: 70px;
|
||
height: 70px;
|
||
color: var(--text-1);
|
||
}
|
||
.writer-avatar .astrion-avatar { width: 100%; height: 100%; }
|
||
|
||
/* ───────── 笔（双层结构） ─────────
|
||
外层 pen-pos：JS 逐帧/过渡定位，使笔尖精确落在文字进度点上；
|
||
内层 svg：以笔尖为圆心旋转摇摆（transform-origin 在笔尖），
|
||
既有晃动，笔尖又不会脱离位置。 */
|
||
|
||
.pen-pos {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 40; /* 最高层：高于 3D 纸、盒子（30）与堆叠纸（21~23），笔不能被挡 */
|
||
width: 40px;
|
||
height: 40px;
|
||
color: var(--accent);
|
||
will-change: transform;
|
||
transition: transform 0.45s cubic-bezier(.4,0,.2,1); /* 飞行/移动用过渡 */
|
||
}
|
||
.pen-pos.is-live {
|
||
transition: none; /* 写字逐帧驱动时关闭过渡 */
|
||
}
|
||
.writer-pen {
|
||
width: 40px;
|
||
height: 40px;
|
||
/* origin = 笔尖视觉触点（SVG (2.65,21.02) → 40px 盒内 (4.4,35.0)），与 nibRef 同点：
|
||
摇摆时笔尖钉住不动，只有笔身晃 */
|
||
transform-origin: 11% 87.6%;
|
||
}
|
||
.writer-pen.is-writing {
|
||
animation: pen-write 0.42s ease-in-out infinite;
|
||
}
|
||
/* 擦除：origin 切到笔尾橡皮触点（SVG (19.2,4.8) → 盒内 (32,8)），与 eraserRef 同点 */
|
||
.writer-pen.is-erasing {
|
||
transform-origin: 80% 20%;
|
||
}
|
||
@keyframes pen-write {
|
||
0%, 100% { transform: rotate(-5deg); }
|
||
50% { transform: rotate(6deg); }
|
||
}
|
||
|
||
/* ───────── 3D 倾斜的纸 ───────── */
|
||
/* perspective 让纸呈平行四边形（不倾斜就只是一条线） */
|
||
|
||
.paper3d {
|
||
position: absolute;
|
||
left: 280px;
|
||
top: 130px;
|
||
width: 192px;
|
||
height: 122px;
|
||
transform: perspective(760px) rotateX(42deg) rotateZ(-7deg);
|
||
transform-style: preserve-3d;
|
||
}
|
||
|
||
.paper-sheet {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: var(--bg-panel);
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
padding: 18px 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
/* 内容行：横线代表一行内容（行宽由 JS 逐帧驱动，不用 transition；opacity 过渡供轮间换内容淡出） */
|
||
.pline {
|
||
position: relative;
|
||
height: 4px;
|
||
border-radius: 2px;
|
||
background: var(--text-3);
|
||
opacity: 0.75;
|
||
transition: opacity 0.28s ease;
|
||
}
|
||
.paper3d.is-refilling .pline { opacity: 0; }
|
||
/* 线右端锚点：0 尺寸，随线的 3D/倾斜变换，供 JS 实测真实右端点 */
|
||
.pline-end {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
width: 0;
|
||
height: 0;
|
||
margin-top: -0px; /* 点本身无尺寸，top:50% 即线厚中心 */
|
||
}
|
||
/* 写入行不再用绿色：与其他行同色（修改记录靠的是 diff 区，不是纸面变色） */
|
||
|
||
/* ───────── diff 区 ───────── */
|
||
|
||
.diff-view {
|
||
position: absolute;
|
||
left: 134px; /* 盒子水平中线（86+48），diff 中心对齐盒子中线 */
|
||
transform: translateX(-50%);
|
||
top: 0;
|
||
font-family: var(--font-mono);
|
||
font-size: 12.5px;
|
||
line-height: 1.5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
z-index: 20; /* 盒内堆叠纸(21~23)之下——genie 时已隐藏，由切片接管 */
|
||
border-radius: 6px;
|
||
transition: background 0.25s ease;
|
||
}
|
||
/* genie 前：四行 diff 合为一张纸的底板（不加 outline：shorthand 不可过渡，会闪白框） */
|
||
.diff-view.is-sheet {
|
||
background: rgba(24, 30, 52, 0.92);
|
||
}
|
||
/* 轮间重置：禁用过渡，红绿底色/符号瞬时消失（否则恢复显示时会闪一下空白红绿块） */
|
||
.diff-view.no-fade { transition: none; }
|
||
.diff-view.no-fade .dline::before { transition: none; }
|
||
.diff-view.no-fade .dsign { transition: none; }
|
||
|
||
/* ───────── 收盒文件卡片（单元素裁切式 genie） ─────────
|
||
卡片全程同一个 DOM 元素：clip-path 多边形裁切（不压缩内容），
|
||
body 每帧定位到轮廓包围盒，文字矢量缩小——全程清晰无损 */
|
||
.file-flight {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition: opacity 0.73s ease, transform 0.22s ease;
|
||
/* SVG 视口默认 hidden 会把描边外半侧（0.5px）裁掉——visible 让边缘描边完整 */
|
||
overflow: visible;
|
||
/* origin 必须在基础规则上恒定（绕底部翘起，底边不露盒口）。
|
||
若只写在 is-hover 里，移出时 origin 瞬间跳回默认中心点，视觉上就是瞬间弹回 */
|
||
transform-origin: 50% 100%;
|
||
}
|
||
.file-flight.is-on { opacity: 1; }
|
||
/* 三轮收盒后可交互：hover 微抬+向右倾（选中感） */
|
||
.file-flight.is-hover {
|
||
transform: translate(2px, -2px) rotate(2.5deg);
|
||
}
|
||
/* 倒出查看时封面文字淡出（diff 层接管内容） */
|
||
.file-cover-name, .file-cover-stat { transition: opacity 0.3s ease; }
|
||
.file-flight.is-bare .file-cover-name,
|
||
.file-flight.is-bare .file-cover-stat { opacity: 0; }
|
||
/* SVG 卡片：path 轮廓即卡片外形——fill 纸色 + stroke 描边跟随轮廓（S 曲线斜边也有描边） */
|
||
.file-flight-shape {
|
||
fill: var(--file-paper);
|
||
stroke: var(--file-line);
|
||
stroke-width: 1;
|
||
}
|
||
.file-cover-name {
|
||
font-family: var(--font-mono);
|
||
font-size: 15px;
|
||
letter-spacing: 0.02em;
|
||
fill: var(--text-3); /* 和纸上线条同色 */
|
||
}
|
||
.file-cover-stat {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
}
|
||
.file-cover-stat .add { fill: var(--ok); }
|
||
.file-cover-stat .del { fill: var(--danger); }
|
||
|
||
/* 卡片热区：三层卡只露出顶边一截，热区从顶边向下延伸到盒口前缘（JS 定高）；
|
||
重叠区归层级更高（更靠前）的卡 */
|
||
.card-hotspot {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 倒出查看的 diff 层：位置同 diff-view（卡片倒出落点），四行逐行淡入；点击收回 */
|
||
.replay-diff {
|
||
position: absolute;
|
||
left: 134px;
|
||
transform: translateX(-50%);
|
||
top: 0;
|
||
font-family: var(--font-mono);
|
||
font-size: 12.5px;
|
||
line-height: 1.5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
z-index: 26; /* 高于盒内堆叠卡（21~23）；与盒前壁（30）不重叠（位于 diff 区） */
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
.replay-diff.is-on { opacity: 1; }
|
||
.replay-diff .dline {
|
||
opacity: 0;
|
||
transform: translateY(3px);
|
||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
}
|
||
.replay-diff.is-on .dline { opacity: 1; transform: none; }
|
||
/* 收回：整体快速淡出（行不再逐行延迟，避免拖慢收回节奏） */
|
||
.replay-diff.is-closing { opacity: 0; transition: opacity 0.22s ease; }
|
||
.replay-diff.is-closing .dline { transition: none; transition-delay: 0ms; opacity: 1; transform: none; }
|
||
|
||
.dline {
|
||
position: relative;
|
||
display: flex;
|
||
gap: 12px;
|
||
padding: 3px 10px;
|
||
border-radius: 4px;
|
||
/* 容器本身始终不透明：转正落位的字符立即可见，不经历消失→淡入；
|
||
红/绿底色由 ::before 独立淡入，+/- 符号独立淡入 */
|
||
white-space: nowrap;
|
||
}
|
||
.dline::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 4px;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
pointer-events: none;
|
||
}
|
||
.dline.is-del::before { background: rgba(212, 123, 107, 0.08); }
|
||
.dline.is-add::before { background: rgba(123, 168, 137, 0.10); }
|
||
.dline.is-shown::before { opacity: 1; }
|
||
.dline .dsign { flex: none; width: 10px; opacity: 0; transition: opacity 0.3s ease; }
|
||
.dline.is-shown .dsign { opacity: 1; }
|
||
.dline.is-del { color: var(--danger); }
|
||
.dline.is-add { color: var(--ok); }
|
||
|
||
/* diff 行内单字符：占位时透明；落位转正后 is-lit 实色显示 */
|
||
.dch { opacity: 0; }
|
||
.dch.is-lit { opacity: 1; }
|
||
|
||
/* 飘行的字母：从笔的擦/写位置飞向 diff 行字符位，落位后转正为流内字符 */
|
||
.dch-ghost {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
font-family: var(--font-mono);
|
||
font-size: 12.5px;
|
||
line-height: 1.5;
|
||
pointer-events: none;
|
||
/* 不设 will-change：合成层位图与转正后的矢量重绘之间会出现大小/清晰度跳变 */
|
||
transition: transform 0.34s cubic-bezier(.35,.1,.25,1);
|
||
z-index: 35; /* 高于盒前壁（30），飞行字母不被盒子挡 */
|
||
}
|
||
|
||
/* 笔尖/橡皮定位参考点：visibility 隐藏（保留几何盒供 getBoundingClientRect 实测），
|
||
同时清掉 fill/stroke 防止从 SVG 根继承描边显形 */
|
||
.pen-ref { visibility: hidden; fill: none; stroke: none; pointer-events: none; }
|
||
|
||
/* ───────── 收件箱（genie 收盒） ─────────
|
||
后壁 z10（纸挡住它）、前壁 z30（它挡住纸）——纸从前后壁之间沉入 */
|
||
.inbox-part {
|
||
position: absolute;
|
||
left: 86px; /* 中心线 x=134 */
|
||
top: 166px;
|
||
width: 96px;
|
||
height: 96px;
|
||
color: var(--text-1);
|
||
opacity: 0;
|
||
transition: opacity 0.35s ease;
|
||
pointer-events: none;
|
||
}
|
||
.inbox-part.is-shown { opacity: 1; }
|
||
.box-back { z-index: 10; }
|
||
.box-front { z-index: 30; }
|
||
/* 前壁盒身填实色：不能透出后面收进去的纸（凹口线保持描边不填） */
|
||
.box-front path { fill: var(--bg-1); }
|
||
/* 盒内纸叠：genie 终态的文件卡片（.file-flight）本身就是插在盒子里的纸 */
|