动效 · Duolingo

多邻国的 11 段交互动效

游戏化学习的 11 个交互母题：配对盖章、词块飞入、宝箱开箱、连击爆炎、路径待机——全部纯 CSS 循环复刻，点任意卡片重播。

参考来源设计风格条目：多邻国式

动效母题 · 11 段

从多邻国真实 App 交互中提炼的 11 个动效母题，全部复刻为手机竖屏画面、CSS 关键帧循环播放；点击任意卡片查看动效详情，复制提示词让 AI 1:1 复刻。

9:41

找出配对项

米饭ごはん水请

检查

完美！

配对答题 · 选中→匹配→盖章

配对答题 · 选中→匹配→盖章点选两块词卡：蓝色选中态，配对后绿色闪光+粒子消散，最后盖上橙色 PERFECT 图章。

9:41

把句子拼完整

これは米饭。

お茶です

检查

词块拼句 · 飞入卡槽

词块拼句 · 飞入卡槽点底部词块，沿弧线飞进答案行空位，原位留灰色占位；拼完 CHECK 按钮由灰变绿。

9:41

COMMONRAREEPICMEGA

+115

点击宝箱升一级

宝箱升级 · 背景换色+开箱

宝箱升级 · 背景换色+开箱每点一次稀有度升一级：COMMON→RARE→EPIC→MEGA 整屏换色，宝箱抖动开箱，宝石堆弹出计数。

9:41

がくしゅう · 学习ひと · 人いしゃ · 医生

排序字母顺序✓最近学过✓

排序面板 · 底部弹层+列表重排

排序面板 · 底部弹层+列表重排面板从底部滑入、背景压暗；选中项打勾后滑出，列表按新顺序做位移交换。

9:41

嗨！我是豆豆 🌱

继续

吉祥物引导 · 打字气泡

吉祥物引导 · 打字气泡吉祥物弹跳入场，对话气泡先出打字省略号再展开文案，主按钮从禁用灰点亮成品牌绿。

9:41

选一个打卡目标

7 天+5014 天+10030 天+250

开始打卡+1

打卡承诺 · 选项选中+进度填充

打卡承诺 · 选项选中+进度填充列表单选高亮，承诺按钮滑入；任务卡进度条从左往右填充，+1 徽章弹出。

9:41

★

点餐与食物第 3 课 · 共 4 课

节点气泡 · 锚定弹出

节点气泡 · 锚定弹出点路径节点，绿色课程卡从节点底部弹出（transform-origin 在指针处），含次级 START 按钮。

9:41

2x等级提升！双倍经验 15 分钟

奖励加载 · 圆形揭幕

奖励加载 · 圆形揭幕加载转圈收束成宝箱，紫色圆形揭幕铺满全屏，气泡上浮，2x 徽章错峰弹出。

9:41

★🐾🎒

路径待机 · 呼吸与脉冲

路径待机 · 呼吸与脉冲常驻 idle 动效：START 环脉冲扩散，节点错峰上下浮动，旗帜轻摆——让界面「活着」。

9:41

完美一课！

总经验⚡051015用时⏱ 0:48正确率✓ 100%

继续

课成结算 · 奖励逐个弹入

课成结算 · 奖励逐个弹入标题弹入后奖励芯片逐个落下、数字滚动计数，星星粒子点缀，CONTINUE 从底部滑入。