动效 · Erly

Erly的 7 段交互动效

对照 Erly 当前版本（1.3.15）的 7 个交互母题：淡紫呼吸光球首页+连击跳数、闹钟开关拨动涟漪、取景框任务倒计时、任务选择 sheet 卡片错峰、打卡成功对勾连排弹出、里程碑虹彩徽章流光、应用锁昼夜交叉淡切——全部纯 CSS 竖屏循环复刻。

参考来源

动效母题 · 7 段

从 Erly 当前版本（1.3.15，2026-09）真实界面提炼的 7 个动效母题，全部复刻为手机竖屏画面、纯 CSS 关键帧循环播放；点击任意卡片查看动效详情，复制提示词让 AI 1:1 复刻。

6:25

Erly🔥4243

Wed29Thu30Fri31Sat1Sun2Mon3Tue4

下一个闹钟6:31 AM6:30 AM明天

🏋俯卧撑任务🐦鸟鸣铃声

首页 · 呼吸光球+连击跳数

首页 · 呼吸光球+连击跳数淡紫光球 4s 呼吸缩放，今日白卡上浮，🔥 数字滚动跳档。

6:25

闹钟

健身🎥俯卧撑🔊鸟鸣✎

周末6:30 AM

上学🔍找物品🔊喧闹✎

工作日6:00 AM

闹钟列表 · 开关拨动+涟漪

闹钟列表 · 开关拨动+涟漪白卡上浮入，胶囊标签回弹，绿色开关拨到端放出一圈涟漪。

6:25

Erly

做俯卧撑 15 秒🔔

15s13s11s9s

任务验证 · 取景框倒计时

任务验证 · 取景框倒计时剪影小人做俯卧撑，秒数逐档递减、细进度条同步填满。

6:25

选择任务完成任务才能关掉闹钟

🤸俯卧撑做俯卧撑，强力开启一天🔍找物品找到并拍下随机指定物品🏋深蹲做深蹲，强力开启一天📕圣经经文大声朗读一节经文开启早晨📖灵修拍下经文并朗读灵修🌤拍天空走到户外拍一张天空

任务选择 · sheet 弹入+卡片错峰

任务选择 · sheet 弹入+卡片错峰白色弹层回弹落定，六张任务卡逐个浮入后选中一枚。

6:25

Erly

🕐起床时间6:30 AM🏋俯卧撑 · 52 秒

🔥 4243 天连击

TueWedThuFriSatSunMon

关闭

打卡成功 · 对勾连排弹出

打卡成功 · 对勾连排弹出七枚绿色对勾错峰弹出描边，连击数跳档后黑色胶囊落定。

6:25

‹里程碑

🔥02143连击天数9已获得徽章

🔥82 天最长连击9/16 枚徽章

连击徽章

早起者1 天连击破晓者3 天连击早鸟1 天连击习惯建立10 天连击晨型人14 天连击仪式者21 天连击

里程碑 · 虹彩徽章流光

里程碑 · 虹彩徽章流光徽章回弹弹出，盘面高光旋转流光，9/16 进度条填充。

6:25

‹应用锁定

🌙锁定10:00 PM→☀️解锁7:00 AM

🌙开始10:00 PM›

☀️结束闹钟后 30 分钟›

▦应用所有应用›

完成

关闭应用锁定

应用锁 · 昼夜交叉淡切+行滑入

应用锁 · 昼夜交叉淡切+行滑入月亮与太阳交叉淡切，设置行错峰左滑、发丝线展开。