SuperAPI AI 工具集

buttons-ctas

通用与其它

查看项目

更新于 10-15 21:36

技能介绍

用途:为按钮、CTA 和可点击操作元素设计动画,使点击与悬停反馈更灵敏、更有触感。

主要能力:把迪士尼十二动画原则应用到按钮状态上,包括按下时轻微缩放(如 :active 用 transform: scale(0.95))、悬停时轻微上移(translateY(-2px))形成预期感、用尺寸/色彩对比/留白突出主 CTA、为默认/悬停/按下/禁用定义清晰关键帧、点击后让阴影或光晕稍晚收尾、图标可滞后 20-50ms、避免线性缓动(悬停进入用 ease-out,离开用 ease-in,cubic-bezier(0.4, 0, 0.2, 1) 较合适)、浮动按钮重定位走弧线、涟漪/图标旋转/阴影变化作为次要动作、给出各状态时长建议(悬停 150-200ms、按下 50-100ms、焦点环 150ms、加载过渡 200-300ms)、成功按钮可短暂放大到 1.05、错误状态可轻微抖动 3-5px 2-3 次、保持圆角与比例一致、按品牌选择圆角或直角风格。

使用方式:以 CSS 过渡实现,示例中 .btn 对 transform、box-shadow、background-color 设置 150ms ease-out;:hover 上移并加阴影;:active 缩放并缩短过渡时长。关键属性包括 transform(scale、translate)、box-shadow、background-color、opacity(禁用态)、filter(悬停亮度)。

适用场景:按钮、CTA、浮动操作按钮等可点击元素的交互动效设计。

限制:资料未提供具体框架、平台或浏览器兼容性说明,也未提供收费、价格或效果数据;实际数值需按项目调整。