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 + 视角切换 + 翻牌”的组合实现复杂叙事。