文字エフェクト · 文字の動き方
文字の光沢文字光泽
- 高級感
- 質感
- 周期的
金属の反射のように光の帯が文字を横切ります。変わるのはグラデーションの位置だけなので、文字そのものは同じままです。
使いどころ
見出し、会員特典、価格など「実際より高く見せたい」1 行に使います。1 画面に 1〜2 か所で十分で、他の点滅系の動きと同時に走らせないでください。2 か所が同時に光ると、ページがちらついているように見えるだけです。本文や小さな文字には使わないでください。文字が小さいほど、その光は描画エラーに見えます。
パラメータ
gradient sweep 160%→−60% · 1100ms cubic-bezier(0.4, 0, 0.2, 1) · every 2.6s · accent head #ffd479 · button band 38px skewed 18°
レシピ
文字の光沢 → sweep 160% → −60% @ 1100ms cubic-bezier(0.4, 0, 0.2, 1)
AI に渡す一文
この見出しに掃引する光を追加してください。文字面に 100° の線形グラデーション（ベース色 → 暖色のハイライト → ベース色）をかけ、background-size を 260% にし、background-clip: text で字形に切り抜きます。background-position を 160% から −60% へ 1100ms で動かし、2.6 秒ごとに繰り返します。光は横切るだけで、文字の色は変えません。同じ画面のボタンには幅 38px・18° 傾けた白い帯を左から右へ 140ms 遅らせて走らせ、面の光と文字の光が同時に来ないようにします。