SuperAPI AI 工具集

glare-hover

设计与创作

查看项目

更新于 10-16 06:51

技能介绍

用途:为卡片添加跟随光标的柔和眩光(glare)悬停效果,形成高级、有触感的光泽。

主要能力:无依赖实现;跟随光标移动;对触屏安全;兼容 prefers-reduced-motion(减少动态效果)设置,在相应环境下禁用。

使用方式:复制 glare-hover.css 与 glare-hover.js,在页面中使用 <div class="glare"> … </div> 结构。脚本会自动附加,并由 JS 写入 --gx/--gy 变量驱动眩光位置。

适用场景:少量重点卡片(hero cards)的精致点缀,不建议用于整片网格。

限制:官方资料未提供更多参数、配置项、浏览器兼容范围与安装命令,暂未提供。