JOJO
39a7a5fc6f
- website-content/：官网 10 篇文档内容 + README - website-design/：官网设计稿、动画实验、预览图与资源 - 根目录官网截图两张 - .gitignore 忽略 website-design/exp/static/dist 构建产物（7.1MB）
270 lines
8.4 KiB
CSS
270 lines
8.4 KiB
CSS
/* 版本控制动画 —— 模块样式（主页 feature 行 / anim4-demo 页共用）
|
||
无边框无底色，融于星空；无 glow。token（--text-1 等）由宿主页面提供。
|
||
类名一律 anim4- 前缀，避免与 01~03 模块冲突。 */
|
||
|
||
.anim4-window {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 舞台：固定 540×380 逻辑尺寸，JS 按容器等比缩放居中（transform: translate+scale） */
|
||
.anim4-stage {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 540px;
|
||
height: 380px;
|
||
overflow: hidden;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
}
|
||
|
||
/* ───────── 用户指令气泡（右上角堆叠） ───────── */
|
||
/* 新气泡从下面浮现，旧的上移跑出可视区（不销毁，倒带时随堆叠回落）；
|
||
容器高度 = 2.5 个气泡 + 间距，顶部渐隐遮罩 = 边缘虚化。
|
||
进出场全由 JS tween 驱动 margin/transform（rAF 可见时间），不用 CSS transition、不 tween height。 */
|
||
.anim4-bubbles {
|
||
position: absolute;
|
||
right: 8px;
|
||
top: 2px;
|
||
width: 248px;
|
||
height: 84px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
overflow: hidden;
|
||
z-index: 30;
|
||
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
|
||
mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 单条气泡：风格同 01 的用户气泡（accent 底深字、右下小尾巴），不变色 */
|
||
.anim4-bubble {
|
||
flex: none;
|
||
align-self: flex-end;
|
||
max-width: 236px; /* 兜底最长指令「我让你整理工作区，不是让你全删了！」17 字单行放下 */
|
||
margin-top: 6px;
|
||
padding: 6px 11px;
|
||
background: var(--accent);
|
||
color: var(--bg-0);
|
||
font-size: 12px;
|
||
line-height: 1.35;
|
||
border-radius: 10px 10px 3px 10px;
|
||
}
|
||
|
||
/* 湮灭碎片：回卷时被时间抹掉的指令字符（逐字 span，JS 物理驱动） */
|
||
.anim4-shard {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
color: var(--accent);
|
||
font-size: 12px;
|
||
line-height: 1.35;
|
||
white-space: nowrap;
|
||
z-index: 40;
|
||
pointer-events: none;
|
||
will-change: transform, opacity;
|
||
}
|
||
|
||
/* ───────── 纸（3D 斜铺的工作台） / 终端 ───────── */
|
||
|
||
.anim4-paper {
|
||
position: absolute;
|
||
left: 268px;
|
||
top: 190px;
|
||
width: 192px;
|
||
height: 122px;
|
||
transform: perspective(760px) rotateX(42deg) rotateZ(-7deg); /* 尺寸/倾斜与 03 一致；位置比 03 低 60px（避让右上气泡区） */
|
||
z-index: 15;
|
||
will-change: transform;
|
||
}
|
||
|
||
.anim4-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; /* 与 03 纸页行距一致 */
|
||
transition: background 0.3s ease;
|
||
}
|
||
.anim4-paper.is-term .anim4-paper-sheet { background: var(--bg-1); }
|
||
|
||
/* 内容行（行宽由 JS 逐帧驱动，不用 transition） */
|
||
.anim4-pl {
|
||
position: relative;
|
||
width: 0; /* 初始是空纸：宽度由 JS 逐帧写入；不写死 100% 会默认撑满 */
|
||
height: 4px;
|
||
border-radius: 2px;
|
||
background: var(--text-3);
|
||
opacity: 0.75;
|
||
transition: opacity 0.25s ease;
|
||
}
|
||
.anim4-paper.is-term .anim4-pl { opacity: 0; }
|
||
.anim4-pl-end {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
/* 终端层：叠在纸面上，morph 时淡入 */
|
||
.anim4-term {
|
||
position: absolute;
|
||
inset: 0;
|
||
padding: 16px 16px;
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
line-height: 1.75;
|
||
color: var(--text-2);
|
||
opacity: 0;
|
||
overflow: hidden; /* 抢救段行多上滚时，裁掉滚出纸面的行 */
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
/* 内容上滚动画在 body 内层做：term 自身 transform 会连同裁剪区一起跑 */
|
||
.anim4-term-body { transition: transform 0.25s ease; }
|
||
.anim4-paper.is-term .anim4-term { opacity: 1; }
|
||
.anim4-term-line {
|
||
display: flex;
|
||
align-items: baseline;
|
||
white-space: nowrap;
|
||
}
|
||
.anim4-term-p { color: var(--accent); margin-right: 6px; }
|
||
.anim4-term-c { color: var(--text-1); }
|
||
.anim4-term-out {
|
||
color: var(--text-3);
|
||
visibility: hidden;
|
||
}
|
||
.anim4-term-out.is-on { visibility: visible; }
|
||
.anim4-term-new {
|
||
visibility: hidden;
|
||
}
|
||
.anim4-term-new.is-on { visibility: visible; }
|
||
.anim4-term-caret {
|
||
display: inline-block;
|
||
width: 7px;
|
||
height: 13px;
|
||
margin-left: 1px;
|
||
vertical-align: -2px;
|
||
background: var(--accent);
|
||
animation: anim4-caret 0.85s steps(1) infinite;
|
||
}
|
||
@keyframes anim4-caret { 50% { opacity: 0; } }
|
||
|
||
/* ───────── 智能体（全部动作由 JS 逐帧驱动，无 CSS 过渡，防 fill 冲突） ───────── */
|
||
|
||
.anim4-agent {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 70px;
|
||
height: 70px;
|
||
z-index: 35;
|
||
will-change: transform;
|
||
pointer-events: none;
|
||
}
|
||
.anim4-agent-avatar {
|
||
display: block;
|
||
width: 70px;
|
||
height: 70px;
|
||
color: var(--text-1);
|
||
}
|
||
.anim4-agent-avatar .astrion-avatar { width: 100%; height: 100%; }
|
||
/* 本动画里智能体在纸/终端/亭前活动：六边形填底色遮住后方元素（组件默认 fill:none 是状态栏规格，此处局部覆盖） */
|
||
.anim4-agent-avatar .aa-frame { fill: var(--bg-0); }
|
||
|
||
/* ───────── 笔（结构同 03：外层定位 + 内层绕笔尖摇摆） ───────── */
|
||
|
||
.anim4-pen-pos {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 40;
|
||
width: 40px;
|
||
height: 40px;
|
||
color: var(--accent);
|
||
will-change: transform;
|
||
transition: transform 0.45s cubic-bezier(.4, 0, .2, 1); /* 普通飞行用过渡 */
|
||
}
|
||
.anim4-pen-pos.is-live { transition: none; } /* 逐帧驱动时关闭过渡 */
|
||
.anim4-pen {
|
||
width: 40px;
|
||
height: 40px;
|
||
transform-origin: 11% 87.6%; /* 笔尖触点（同 03） */
|
||
}
|
||
/* 写字摇晃由 JS 逐帧驱动（振幅包络起止收敛到 0°，见 writeLine），不用 CSS 动画 */
|
||
/* 甩飞：绕中心翻滚 */
|
||
.anim4-pen.is-free { transform-origin: 50% 50%; animation: none; }
|
||
/* 捡笔回正：过渡平滑转正，期间 origin 保持中心（结束移除后 rotate=0 不受 origin 影响） */
|
||
.anim4-pen.is-returning { transition: transform 0.38s ease; transform-origin: 50% 50%; animation: none; }
|
||
.anim4-pen-ref { visibility: hidden; fill: none; stroke: none; pointer-events: none; }
|
||
|
||
/* ───────── 时光机（整机 2D 矢量化：所有面 JS 手算透视投影、屏幕空间 SVG 绘制） ─────────
|
||
wrapper 承担 2D 整体运动（下落/浮空/微倾）；面的投影由 drawBooth() 每帧按偏航 24°+sway 计算。
|
||
三层：后层 svg z1（左外墙 + clip 到门洞的内景）< 智能体 z2 < 前层 svg z3（关门即挡住他）。
|
||
体：96×96×142 正方形柱；正面左右梃各 18 + 门洞 60（双开门）；屋顶四棱锥底 108×108 高 28。
|
||
智能体进出不做消失动画：走进深处被左梃自然遮挡。 */
|
||
|
||
.anim4-booth {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 150px;
|
||
height: 220px;
|
||
z-index: 20;
|
||
opacity: 0;
|
||
will-change: transform;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 智能体挂载层：与门洞投影对齐的透明层（投影公式标定），夹在前后两层 svg 之间。
|
||
无背景无裁剪：室内由内景多边形提供；超出门口的部分被前层双梃/门板自然遮住。 */
|
||
.anim4-booth-inner {
|
||
position: absolute;
|
||
z-index: 2;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 矢量化覆盖层：屏幕空间绘制（原生 AA 永远锐利，根治 3D 纹理重采样锯齿）；
|
||
填色/描边语言延续线稿（bg-1 面 + text-1 棱；内景 bg-0、地板 bg-panel） */
|
||
.anim4-booth-wire {
|
||
position: absolute;
|
||
inset: 0;
|
||
overflow: visible;
|
||
pointer-events: none;
|
||
}
|
||
.anim4-booth-wire-back { z-index: 1; }
|
||
#boothWireFront { z-index: 3; }
|
||
.anim4-booth-wire polygon {
|
||
fill: var(--bg-1);
|
||
stroke: var(--text-1);
|
||
stroke-width: 1.6;
|
||
stroke-linejoin: round;
|
||
}
|
||
#bwInBack, #bwInSideR, #bwInCeil { fill: var(--bg-0); }
|
||
#bwInFloor { fill: var(--bg-panel); }
|
||
.bw-door-stripe { stroke: var(--text-1); stroke-width: 1.6; }
|
||
.bw-door-knob { fill: var(--text-1); stroke: none; }
|
||
#bwRod { stroke: var(--text-1); stroke-width: 2; stroke-linecap: round; }
|
||
#bwKnob { fill: var(--bg-1); stroke: var(--text-1); stroke-width: 1.6; }
|
||
|
||
/* ───────── 地面接触阴影（中性灰，非发光） ───────── */
|
||
|
||
.anim4-shadow {
|
||
position: absolute;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background: rgba(0, 0, 0, 0.35);
|
||
z-index: 5;
|
||
pointer-events: none;
|
||
}
|
||
.anim4-shadow-booth { width: 116px; opacity: 0; }
|
||
.anim4-shadow-agent { width: 56px; opacity: 0; }
|