分享一个做网站趣味动画的小技巧，昨天我分享了网站 https://oiloil.org 的一个首屏动画效果，首屏的小人眼睛和小狗的头可以跟着我的鼠标移动，而且看起来蛮丝滑的。

小人的眼睛大家应该能看出来实现方式，先生成一个不带有眼球的人物图片，再通过代码画一个眼睛，并且跟随鼠标移动。

但是小狗的大家可能不知道怎么做，我这里的实现方式不是通过 3D 建模，而是通过图片切换做到的。我最开始的思路也是通过 AI 生图，就像 CodeX 自带的宠物功能那样，生成单张多帧的图片，然后抠图切割后在 UI 上根据鼠标位置进行图片切换，但是使用 AI 生图的方式帧率太低了，一点都不丝滑。如果再补充一些图片的话，即便使用参考图，小狗的一致性也没办法像在一张图里生成出来那么强。

于是我就想到了可以用 AI 视频的方式，来生成一致性强且连贯高帧数的视频，这里我用的是 Minimax H3 模型。整体实现流程如下：

1. MiniMax H3 生成一段 24 FPS、约 5 秒、124 帧的绿色背景。视频。
2. 从视频中整理抠图出不同朝向，再通过插帧补成 240 个方向帧。
3. 将 240 帧合并成一张 16 × 15 的 WebP 精灵图。
4. 根据鼠标相对小狗的角度，计算应该显示精灵图里的哪一帧。
5. 使用程序给帧序号增加惯性、最大转头速度和减速过程。
6. 浏览器只改变 background-position，不播放视频，也不同时加载 240 张图片。

利用这个思路其实可以做很多有趣的效果，比如：拖动进度控制产品展开、拆解、组装、融化或生长。页面滚动映射视频帧，形成苹果官网那种可正放、倒放、随时停住的镜头。

我甚至还在想如果 AI 生成视频每一帧能够不一样，那么是不是生成一个视频相当于生成几百张图片，算下来可能比生成图片还便宜。

希望这个思路能带给大家一些灵感～

Oil® — 欧呦

Source: https://www.oiloil.org/ 悬停Hover鼠标

鼠标放上去的时候按钮变个色，让人知道它能点。

悬停我浮起 + 变色对照组我不响应

把鼠标逐个放上去，感受“能点”和“不能点”的差别

弹性Spring动效

弹窗出现时带一点回弹，像弹簧那样轻轻晃一下。

先越过目标值再回弹：overshoot

点轨道或「重播」再看一次回弹

毛玻璃Backdrop Blur外观

导航栏做成半透明的，后面的内容滚过去时模模糊糊。

山居民宿 · 云顶backdrop-filter: blur(10px)

点右上角开关，对比有无背景模糊的差别