细节与特效 · 耐看的小细节
双色刷色Dual-copy colour wipe
- 被刷过去
- 字没动
- 有方向
一行字的颜色被「刷」过去:新颜色像被从一边推进来填满整行,字本身一步没动,也不是整体淡入淡出 —— 像有人拿刷子给它上色。
什么时候用它
链接扫过、标题强调、价格变化、导航当前项用它;一整段正文别用 —— 刷色过程中那几帧是读不清的。
参数
two stacked copies · top clip-path inset(0 100% → 0 0) · gradient mask soft edge · 620ms cubic-bezier(.65,0,.35,1) · text position fixed
配方
双色刷色 → 620ms cubic-bezier(.65,0,.35,1)双色刷色 → two stacked copies · top clip-path inset(0 100% → 0 0) · gradient mask soft edge · text position fixed
给 AI 的一句话
给这行字做双色刷色:把同一段文字复制两份完全重叠,上层是目标颜色,用 clip-path: inset(0 100% 0 0) 从右边往左推进到 inset(0),交界处加一条渐变 mask 做软边,620ms cubic-bezier(.65,0,.35,1)。文字的位置和字号全程不变。