SuperAPI AI 工具集

shimmer-button

设计与创作

查看项目

更新于 10-16 06:51

技能介绍

用途:为单个主行动按钮(如“开始使用”“升级”)增加高级感的高光扫过效果。属于 motion-anything 项目,遵循 MOTION-SPEC.md,技法由 Magic UI 推广,此处以无依赖的纯 CSS 重新实现。

主要能力:一条柔和光带横穿按钮,静止时缓慢扫动(默认 2.6 秒),悬停时加快(默认 1.1 秒);可调整扫动时长与按钮颜色。

使用方式:将 shimmer-button.css 复制到项目并引入,给按钮加上 class="shimmer",例如 <button class="shimmer">Get started</button>,再按需调整时长与颜色。

适用场景:仅限一个视图中的一个主 CTA。

限制与克制:不要用于次级或破坏性按钮,也不要同时用于多个按钮,否则扫光会变成噪音;每个视图限一个。

无障碍与性能:在 prefers-reduced-motion 下扫光停止,保留普通实心按钮;仅对遮罩伪元素的 transform 做动画,对 GPU 友好。纯 CSS,任何框架可用。