SuperAPI AI 工具集

shine-border

设计与创作

查看项目

更新于 10-16 06:51

技能介绍

用途:为单个主视觉卡片、CTA 或“推荐”档位元素添加边框环绕光带,让静止在屏幕上的元素显得有生命感。每屏只用一个,保持缓慢、低对比,避免与其他强动效或严肃内容同处。

主要能力:通过遮罩的 conic-gradient(借 @property --shine-angle 驱动)实现边框光带移动,动画对合成器友好;在 prefers-reduced-motion 下光带停止,仅保留普通静态边框;纯 CSS,无依赖,任何框架中可直接使用,并可按组件作用域调整 --shine-* 变量。

使用方式:把 shine-border.css 复制到项目中并链接;在元素上标记 class="shine";用 CSS 变量 --shine-color、--shine-width 以及动画时长(默认 4s)进行调优。

限制:同一视图内只应使用一个闪烁元素,多个同时出现会互相干扰形成噪声;不适合平静或严肃内容,也不适合附近已有强烈动画的场景。具体收费、价格、平台范围等资料暂未提供。