# CG创作实践参考

#### 1 折叠/展开：checkbox + `max-height`

```
.memory-blackbox .memory-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.memory-blackbox .memory-toggle:checked ~ .memory-body {
  max-height: 520px;
  opacity: 1;
}
.memory-blackbox .memory-toggle:checked ~ .memory-header .arrow {
  transform: rotate(180deg);
}
```

* 结构固定为 `input + label + ~`。禁止使用 `:has()`，也不要期望 `display` 过渡。
* Checkbox 区域可用 `position: absolute` 覆盖整个 header，保证移动端也能轻松点击。

#### 2 Tab / 轮播：radio 分组

* 使用 `type="radio"` 并共享 `name`，实现互斥切换；每个面板默认 `opacity: 0; pointer-events: none`，在 `:checked ~ .tab-panel` 时切换为可见。
* 指示器可结合 `peer-checked:bg-*` 或自定义 CSS `~` 选择器实现，避免用 JS 模拟轮播。

#### **3 动画层级**

* **布局优先 Tailwind**：`flex`, `grid`, `gap`, `peer-checked:` 覆盖 80% 交互；只有 `max-height`、复杂 `@keyframes` 才写到 CSS。
* **自定义动画**：`@keyframes` ；尽量避免 `filter: blur()` 等高开销属性。
* **状态切换**：颜色/旋转可直接用 `peer-checked:text-purple-300`、`peer-checked:rotate-180`，减少自定义样式体积。

#### **4 展开全文、模式切换、网格布局**

* **效果**：模拟微信朋友圈，支持展开全文、点赞/评论切换、1-3 列图片网格，评论框还能显示“回复”链路。
* **实现亮点**：
  * 用隐藏 checkbox + label 控制 `expanded-content` 的 `max-height` 和 `opacity`，实现平滑展开。
  * 点赞/评论按钮用 `label + input[type=checkbox]`，让 `button-count`、`comment-section` 走 `peer-checked:` 状态切换。
  * 图片区域通过 `grid-1/2/3` 类切换 `grid-template-columns`，不需要额外 JS。
* **样式提示**：折叠内容不要用 `display: none`，而是 `max-height` + `overflow: hidden` + `transition`；按钮状态善用 `pointer-events: none` 的图标层避免重复点击。
* **复用建议**：同样的“卡片 + 折叠 + 可选网格”模式适合旅行战报、活动总结、记忆回顾等场景，只需换哈希 tag、统计文案即可。

#### **5 进度条、多选项**

* 数值条：外层包一个固定宽度容器，内部 `div` 根据百分比在生成 HTML 时追加 `data-progress="80"` 或直接写 `style="width:80%"`，CSS 用 `linear-gradient`、`box-shadow` 加入能量感，再叠加 `::before` 做粒子动画。
* 状态警报：容器放置 `data-level="near"` 之类属性，CSS 用 `[data-level="near"] { background: ... }` 定义三套色板，变量改变只需换属性值。
* 选项反馈：两三个 radio 共用 `name="choice"`，对应的结果区写成 `input#choice-a:checked ~ .result-a`，即可在不写JS的情况下联动文字。
* **样式提示**：仪表上的数值（心率、距离等）用 `font-variant-numeric: tabular-nums` 保持对齐；`data-*` 属性特别适合做“危险/警戒/正常”三种状态。
* **适用场景**：需要表现监测面板、恋爱观测、战报等“数值 + 告警 + 多选项”的 CG，都可以复用“进度条 + data-level + radio”的组合。

#### **6 弹幕列表、关键帧特效**

* **交互思路**：
  * 弹幕元素就是 `div`，外层包一个绝对定位容器，通过 `animation-delay` 让不同气泡依次出现；如果需要循环，设置 `animation-iteration-count: infinite`。
  * 礼物/飘心效果使用额外一层 `position: absolute` 的特效容器，内部用 `@keyframes` 控制 `transform: translateY`, `scale`, `opacity`。
  * 为避免遮挡操作按钮，大部分特效层都加 `pointer-events: none`，核心交互（比如右侧按钮）放在独立容器里。
* **样式提示**：统一用 `backdrop-filter`、`rgba` 透明度营造玻璃质感；`mix-blend-mode: screen` 能让飘心与背景融合。
* **适用场景**：直播、监控室、数据大屏等需要“实时弹幕 + 特效层”的场景，直接照此模式定制弹幕文本即可。

#### **7 多路 radio 选择 + 翻牌**

* **交互思路**：
  * 多套 radio（时间轴、视角、灯光）各自共用一个 `name`，每个 radio 搭配一个 label。内容区通过 `#radio-id:checked ~ .target` 切换不同段落。
  * 氛围控制（冷光/阴影）最好用 checkbox，这样多个状态可以叠加；CSS 根据 `#light:checked ~ ...` 追加渐变、阴影、滤镜。
  * 场景卡片翻面采用 `input[type=checkbox]` 控制 `transform: rotateY(180deg)`，外层必须设置 `perspective` 和 `transform-style: preserve-3d`。
* **样式提示**：为避免 radio 控制器占位置，可以把输入元素 `position: absolute; opacity: 0;`，再让 label 做成按钮；翻牌动画记得设置 `backface-visibility: hidden`。
* **适用场景**：需要“导演台/监控台/多结局回放”时，可用这套“radio + 视角切换 + 翻牌”的组合实现复杂叙事。