MotionLang

细节与特效 · 耐看的小细节

双色刷色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

配方

  1. 双色刷色 → 620ms cubic-bezier(.65,0,.35,1)
  2. 双色刷色 → 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)。文字的位置和字号全程不变。

同类的其他动效