前端特效

收集常用前端动效模板,快速查看效果方向并沉淀为可复用实现思路。

NEW

CSS 关键帧徽章

CSS 动效

适合状态徽章、促销标签和功能入口,用纯 CSS 做轻量闪烁与位移。

查看详情和提示词
Hover Action

磁吸悬停按钮

鼠标交互

适合主按钮、工具栏按钮和强调操作, hover 时形成轻微吸附反馈。

查看详情和提示词

滚动视差卡片

滚动特效

适合专题页、作品集和内容封面,让卡片在滚动中形成层次位移。

查看详情和提示词

聚光光标区域

鼠标交互

适合灵感墙、资源卡片和仪表盘重点区,用光斑突出可探索区域。

查看详情和提示词
Motion Text

打字机标题动效

文字动效

适合首屏标题、命令行文案和产品口号,制造逐字出现的阅读节奏。

查看详情和提示词

骨架屏加载动画

加载动画

适合列表、卡片和详情页等待状态,让加载过程稳定且有反馈。

查看详情和提示词

玻璃拟态面板

CSS 动效

适合浮层、快捷面板和控制中心,保持背景可见但信息层级清晰。

查看详情和提示词

粒子动线背景

背景/粒子

适合技术封面、工具入口和 AI 主题区域,营造数据流动感。

查看详情和提示词

3D 倾斜卡片

3D/WebGL

适合产品卡、案例卡和模板预览,轻量表达空间感和可点击性。

查看详情和提示词

页面转场遮罩

页面转场

适合列表到详情、工作台切换和沉浸式页面进入,减少视图跳变。

查看详情和提示词
kryon.devOK

表单输入反馈

表单/按钮反馈

适合登录、搜索和创建流程,输入成功后给出清晰的微动效确认。

查看详情和提示词

闪光按钮特效

表单/按钮反馈

适合生成、检索和提交类高意图操作,用斜向扫光强化按钮的可点击感。

查看详情和提示词