MOTION HUB

扫光按钮

Shine Sweep
#shine-sweep · 54/72
HOVER · 悬停交互

参数调改

PLAYGROUND
高光颜色--beam_color
按钮底色--bg_color
文字颜色--text_color
扫光时长--dur_ms
4002000
ms
光带宽度--beam_w
1580
%
倾斜角度--beam_angle
040
deg

实现要点

NOTES
  1. 01

    高光带是绝对定位的斜置渐变窄条(transparent→白→transparent),静止时藏在按钮左外侧,hover 时动画 left 从 -75% 扫到右侧外并淡出,不会残留在按钮上。

  2. 02

    运动属性是 left + opacity:left 走动画会有少量重排,但按钮内布局极简、动画只持续不到 1s,实测无感;如需绝对 60fps 可换 translateX 版本(改用 transform: translateX(-150%)→translateX(350%))。

  3. 03

    光带宽度用百分比定义(相对按钮宽),任何按钮宽度下扫光比例观感一致;skewX 的负角度让光带像玻璃反光一样斜切。

  4. 04

    beam_color 参数是 color 类型,注入到 rgba 渐变中转时使用 color-mix 或直接十六进制均可;演示里以 var() 直接嵌入渐变端点。

  5. 05

    预览自动演示:body:not(:hover) 时跑 4.4s 周期的演示动画(静止 55% 周期后扫一次),光标进入 iframe 后立即让位给真实 hover 动画。

  6. 06

    reduced-motion:动画整体关闭(含演示动画),按钮保留静态外观。

源代码

SOURCE

加载源代码…