深夜 11 点的宿舍，和被 DDL 追着跑的每一个你。

晚上 11 点， DDL 作业 12 点截止。

功能全都跑通了，但页面白底黑字，不能说像教务系统，只能说一模一样。作业要求里却明明白白写着四个字：“美观大方”。

我打开 CSDN 搜“网页 动画 怎么写”，抄了一段看不懂的 JavaScript，卡得像 PPT。正准备摆烂时，室友来了一句：你傻啊，去千问办公下个 skill 啊。

我搜到了一个叫「Motion.dev 动画库」的 skill，装完直接问了一句：“给我的登录页按钮加个点击动效。”三秒钟，代码弹了出来，还带着白话注释：这行是悬停放大，这行是点击按下去。

复制，粘贴，刷新。按钮会弹了。那一刻我差点哭出来。

第二天演示，老师盯着屏幕看了两秒，问：“这个动效是你自己写的？”我支吾道：嗯……差不多。

今天就把这位“动画外挂”分享给你，顺便教你把它用明白。

01 它是谁：先花 30 秒分清两个东西

很多人第一次会把它们搞混，其实差得很远：

Motion 是一个很火的网页动画库，就是当年 Framer Motion 的进化版，压缩后只有 2.3kb，小到可以忽略。

Motion.dev 这个 skill，是装在千问办公里的“会用 Motion 的智能助手”——你不用会写代码，把需求说给它听，它直接给你能跑的代码，还负责讲明白。

形象点说：Motion 是菜谱，这个 skill 是站在你旁边的私教。作业这种场合，你要的不是学会做菜，是今晚就把菜端上去。

02 三步用上这个“外挂”

第一步：下载

打开千问办公，在「技能」里搜 Motion.dev（搜“动画”也能找到），一键添加。

第二步：问

把你的需求直接发给它，越具体越好。几个作业场景实测好用的问题模板，直接抄：

• “这是我的登录页代码，给提交按钮加悬停放大、点击按压的效果”（附上你的代码）

• “我有一个课程列表，想让每条依次入场，用 Motion 怎么写”

• “页面滚动到某个区域时内容淡入浮现，给我完整代码”

• “这段动效代码报错了，帮我看看”（救急神技）

第三步：贴

把它给的代码复制进你的作业，刷新，完事。哪里不对就继续追问“想让它弹得更快一点”，它会帮你改参数。

一句话：以前你抄代码靠运气，现在你有个 24 小时在线的动效家教。

03 从“教务系统”到“模范作业”，只差这几行

同一个登录页，加动效前后的差距，比你想的大：

• 修改前：白底黑字，按钮点下去毫无反馈，整个页面像一张打印纸。

• 修改后：输入框聚焦时微微浮起，提交按钮悬停放大、点击有按压回弹，登录成功后卡片上浮淡出，再平滑跳进课程页。

▼ 修改前：白底黑字，按钮点下去毫无反馈

▼ 修改后：悬停放大、点击回弹、入场平滑过渡

配色上用的是深色底加紫色系主色，动画走 CDN 全局引入：就算断网，也只是动效消失、页面照常能开——这点对交作业很关键，别让一个动画把整个项目跑挂。

写在最后

DDL 人 help DDL 人。工具本身不神秘，神秘的是你终于愿意在截止日期前一小时，给那个白底黑字的页面加上一点呼吸感。

你的页面动起来了吗？评论区晒图，看看谁的“外挂”开得最猛。