HOVER · 悬停交互
参数调改
PLAYGROUND
高光颜色--beam_color
按钮底色--bg_color
文字颜色--text_color
扫光时长--dur_ms
4002000
光带宽度--beam_w
1580
倾斜角度--beam_angle
040
实现要点
NOTES- 01
高光带是绝对定位的斜置渐变窄条(transparent→白→transparent),静止时藏在按钮左外侧,hover 时动画 left 从 -75% 扫到右侧外并淡出,不会残留在按钮上。
- 02
运动属性是 left + opacity:left 走动画会有少量重排,但按钮内布局极简、动画只持续不到 1s,实测无感;如需绝对 60fps 可换 translateX 版本(改用 transform: translateX(-150%)→translateX(350%))。
- 03
光带宽度用百分比定义(相对按钮宽),任何按钮宽度下扫光比例观感一致;skewX 的负角度让光带像玻璃反光一样斜切。
- 04
beam_color 参数是 color 类型,注入到 rgba 渐变中转时使用 color-mix 或直接十六进制均可;演示里以 var() 直接嵌入渐变端点。
- 05
预览自动演示:body:not(:hover) 时跑 4.4s 周期的演示动画(静止 55% 周期后扫一次),光标进入 iframe 后立即让位给真实 hover 动画。
- 06
reduced-motion:动画整体关闭(含演示动画),按钮保留静态外观。
源代码
SOURCE
加载源代码…