文字特效 · 字怎么动
文字光泽Shine sweep
- 贵
- 有材质
- 周期性
一道高光从字上扫过去,像金属反光。它不改颜色,只改一条渐变的位置,所以字本身一直是同一个字 —— 这是「让标题看起来值钱」最省的做法。
什么时候用它
给标题、会员权益、价格这类「要显得比实际贵一点」的一行字用。一屏一两条就够,而且不该和别的闪烁类动效同时出现 —— 两个地方一起亮,人只会觉得页面在闪。正文和小号字上别用:字号越小,那条高光越像渲染错误。
参数
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,让「面」和「字」的光不同时到达。