← 全部模板

变形标题 <MorphHeadline />

同一位置的两句超大字:第一句逐字模糊散开,第二句在原处凝聚出来;底部两栏分别注释前后两句。

在示例演示里查看 →

分组
转折 · 一句话变成另一句
组件
MorphHeadline · #morph-headline
交互
build 模式下按 → 变形;直接进入本页时停顿约 1.6 秒后自动变形,打印只显示第二句

适合

  • 前后对照的名句、口号
  • “从 A 到 B”的立场转变

不适合

  • 两句都要同时被读到:用 Compare 类模板
  • 句子超过 12 字

内容上限

1from、to 各 ≤ 12 字
2notes 正好 2 条:label ≤ 6 字,body ≤ 40 字

字段

字段类型
kicker · 必填string小节名,2–8 字
from · 必填string第一句
to · 必填string变成的第二句
notes[{ label, body }, { label, body }]前后两句的注释
sourcestring事实出处

示例代码

<MorphHeadline kicker="那句话" from="一个人的一小步" to="人类的一大步" notes={[{ label: '前半句', body: '…' }, { label: '后半句', body: '…' }]} />