用途:在 HyperFrames 合成中制作“标题+关键词标签”版式的幻灯片,适合需要把概念压缩为短关键词的场合,例如技术栈、核心属性、比较维度或摘要索引。
结构:场景使用 <div id="s-N" class="scene clip">,带上 data-start、data-duration="6"、data-track-index="0";内部依次为 .eyebrow(类别)、.scene-title(主标题)、.scene-subtitle(可选副说明)和 .tags 容器,容器内放若干 .tag,其中可有一个 .tag.accent 作为强调标签。
CSS 要点:.tags 使用 flex 布局并允许换行,间距 20–24px,上边距 56px;.tag 内边距 18–20px 32–36px,圆角 999px,字号 36–42px,字重 700;背景可用主题透明白(rgba(255,255,255,0.18))或浅色调;边框为浅色描边;.tag.accent 使用强调色背景与对比文字色。
动画:使用 GSAP 时间线,逐项淡入。.eyebrow 用 scale 0.85、opacity 0、0.5 秒、back.out(1.6);.scene-title 用 y 40、opacity 0、0.7 秒、expo.out;标签用 y 24、opacity 0、0.45 秒、power2.out,并以 stagger 0.08 批量出现(间隔 0.06–0.1 秒)。可只让一个 accent 标签用不同 scale 或缓动加以区分。
生成器检测规则:以 # [徽章] 标题 开头,下一行为副说明;以 > 开头的行视为标签组,用逗号分隔,关键词 处理为 accent 标签。
编写原则:标签 3–5 个较合适,最多 8 个并需确认可读性;每个标签为简短名词短语;只设一个强调标签,多个会削弱效果;标签过长时改用 title-bullets。
限制:本技能专门针对该幻灯片版式,其他版式或通用流程暂未提供。