前端微交互实验室

Micro
Interaction
Lab

探索动画边界 · 提升交互愉悦感
Apple-style Motion · 60fps Silk-smooth · Premium UI

向下滚动
Buttons

魔法按钮

流光边框 · 物理按压 · 光影追随 — 每一次点击都是一次视觉享受

Aurora Glow

渐变流光 + 光泽扫过效果

Neon Border

旋转彩虹边框 + 按压反馈

Magnetic

鼠标靠近时的磁力吸附效果

Ripple

Material Design 水波纹扩散

Morphing

提交 → 加载中 → 完成 变形动画

Spotlight

鼠标追踪的聚光灯光效

Cards

丝滑卡片

3D 视差位移 · 光影追踪 · 深度感知 — 让平面设计拥有空间纵深感

3D 倾斜效果

鼠标悬浮时卡片随鼠标位置产生倾斜,内部元素层级不同产生视差位移。

了解更多

发光边框

悬浮时边框渐变发光,内部背景保持纯净,形成精致的光晕镶边效果。

了解更多

毛玻璃拟态

毛玻璃拟态设计,背景虚化与透明叠加,呈现苹果风格的精致层次。

模糊层叠纵深

揭示效果

鼠标移入时从底部滑入隐藏内容,提供渐进式信息展示体验。

这是一个完美的渐进式内容展示模式,用户只需悬浮即可获取更多信息。

查看详情

层叠卡片

多层卡片堆叠效果,悬浮时层层展开,展示空间深度与层次结构。

了解更多

聚光灯揭示

鼠标追踪的柔和聚光灯效果,为卡片增添精致的交互光感。

了解更多
Inputs

输入反馈

灵感来自 Linear / Vercel — 每一次输入都伴随着精准的视觉反馈

Focus Glow

聚焦时外发光渐变边框

Float Label

输入时标签上浮动画

Validation

实时邮箱格式验证反馈

Command Search
⌘K

Vercel 风格搜索 + 快捷键提示

Loaders

微加载动画

不只是等待 · 更是视觉享受 — 让加载过程变成缓解焦虑的趣味动画

Orbit
Pulse
Wave
Morph
Bounce
Gradient
DNA
Progress