NEW
前端特效
收集常用前端动效模板,快速查看效果方向并沉淀为可复用实现思路。
Hover Action
Motion Text
kryon.devOK
表单/按钮反馈前端特效模板
闪光按钮特效
适合生成、检索和提交类高意图操作,用斜向扫光强化按钮的可点击感。
详情
- 按钮主体保持稳定尺寸,扫光层用 absolute 覆盖并只改变 transform。
- 扫光颜色使用半透明白色渐变,避免压过按钮文案和图标。
- hover 时略微抬升,active 时回落,让生成类操作有明确按压反馈。
提示词
请在当前 React/Next.js 项目中实现「闪光按钮特效」前端特效。 使用场景: 适合生成、检索和提交类高意图操作,用斜向扫光强化按钮的可点击感。 实现要求: - 保持现有页面结构、设计系统和响应式规则,不新增无关依赖。 - 动效优先使用 transform、opacity、CSS 变量或现有 motion 能力,避免频繁改 width、height、top、left。 - 桌面端要有清晰 hover/focus 状态,移动端要有合理降级。 - 控制动画时长和节奏,补充 prefers-reduced-motion 降级。 - 输出完整可运行的组件和样式代码,并解释关键参数。
