ディテールと演出 · 仕上げの小技
二重コピーの色塗り双色刷色
- 塗り込まれる
- 文字は動かない
- 方向がある
一行の色が「塗り込まれて」いきます。新しい色が片側から押し出されて行全体を満たし、文字自体はまったく動きません。フェードではなく、刷毛で塗る動きです。
使いどころ
リンク、見出しの強調、価格の変化、ナビの現在地に向きます。本文全体には使わないでください。塗っている途中の数フレームは読めません。
パラメータ
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 に渡す一文
この行に二色の塗りを作ってください。同じテキストを 2 枚完全に重ね、上の層を目的の色にし、clip-path: inset(0 100% 0 0) から inset(0) へ押し出します。境界はグラデーション mask で柔らかくし、620ms cubic-bezier(.65,0,.35,1)。文字の位置と大きさは変えません。