细节与特效 · 耐看的小细节
文字形变Text morph
- 精致
- 惊喜
- 短促
一个词被另一个词替换时,旧文字向上淡出、新文字从下方补上,像一个词换了个身。
什么时候用它
标题里的轮播词、状态标签切换用它;段落正文替换不要用,会看不清。
参数
transform: translateY 100%→0 alternating · per word 260ms · cubic-bezier(0.22, 1, 0.36, 1) · alternating offset 60ms
配方
每个词 260ms文字形变 → translateY 100% → 0 @ 260ms cubic-bezier(0.22, 1, 0.36, 1)往返错峰 60ms
给 AI 的一句话
做文字形变效果:旧词向上移出并淡出、新词从下方移入,每词 260ms、cubic-bezier(0.22, 1, 0.36, 1),两词偏移 60ms。