Motion, done properly

Front-End Motion Lab

高级交互动效,拆开讲清楚。

8 个生产级 UI 动效,每个都有可玩的实时 Demo、原理拆解,和一段直接丢给 AI 就能还原的提示词。

效果目录

8 个效果 · 全部本地运行
01 / 交互

3D 倾斜光影面板

跟随指针的 3D 透视倾斜 + 径向反射流光,松手 Spring 阻尼回正——本页每张卡片就是它的现场演示。

看 Demo 并复制提示词 →
02 / 交互

动态弥散光晕边框

Conic 旋转渐变描边 + 底部呼吸弥散背光,让卡片“发光”而不刺眼。

看 Demo 并复制提示词 →
03 / 交互

物理弹簧交错流

列表 Stagger 交错入场,弹性滑入,滚动加载时尤其出彩。

Demo + 提示词 →
04 / 交互

弹性微缩按压反馈

0.96 物理压缩 + 内阴影,释放时超调回弹。

Demo + 提示词 →
05 / 图表

活动圆环

同心圆环从零画到当前值,中心数字同步增长。

Demo + 提示词 →
06 / 交互 · 压轴

磁吸游标 & 滚动码表 Odometer

折线图上数据点磁吸吸附,顶部数值 Odometer 滚动计数器平滑联动——数据看板最常用的两个手感,一个页面讲完。

看 Demo 并复制提示词 →
07 / 图表

环形占比图

各段顺时针依次画出,点击外移高亮,中心同步显示名称与百分比。

看 Demo 并复制提示词 →
08 / 交互

阻尼弹性抽屉

底部 Sheet 橡皮筋回弹,松手按手势速度吸附最近锚点。

看 Demo 并复制提示词 →

怎么用

三步,把效果搬进自己的项目。

  1. 01逛效果。每张卡片都是可交互的实时 Demo,手机电脑都能玩。
  2. 02读拆解。详情页讲清原理与参数:阻尼曲线、吸附逻辑、关键 CSS。
  3. 03抄走提示词。一键复制,丢给 AI 就能在自己项目里还原同款。