SuperAPI AI 工具集

css-hover-effects

前端与建站

查看项目

更新于 10-15 20:30

技能介绍

用途:根据网页已有 CSS 自动识别设计风格,并为元素套用风格匹配的纯 CSS 悬停效果,无需 JS、无依赖、无 SSR 问题。

主要能力:先按 border-radius、色彩饱和度、transition、间距密度、阴影、字体等信号把设计归入 MINIMAL、BOLD、PLAYFUL、CORPORATE、DARK-PREMIUM 之一,再查效果×风格兼容矩阵挑选 Float、Glow、Underline、Sweep、Grow、Pop、Wobble、Buzz、Background Fade、Shutter、Border Fade、Ripple、Shadow Radial、Curl、Bubble 等效果。

使用方式:读取现有 CSS 判风格,按矩阵选效果,用 CSS 自定义属性对接现有配色,并加入 prefers-reduced-motion 降级规则。规则包括:MINIMAL 每页最多 2 种效果且时长≤250ms;CORPORATE 仅用背景淡变、下划线、边框、轻微浮动;DARK-PREMIUM 优先 Glow 与 Shadow Radial;Wobble/Buzz 每页不超过 3 个元素;Pulse Grow 每页最多 1 个。

适用场景:导航链接、主/次按钮、卡片、图标按钮、标签徽章、图片、表格行、提示气泡等。限制:同一元素不叠加竞态效果,动画类效果每个元素最多 1 个;文档未提供安装命令、收费与价格信息。