这个 Skills 也太萌了！在网页角落放一只会盯着你光标转头的 Q 版小动物，点它会眨眼、冒红心，连点四次还会晕 😁😁😁

米亚罗的枫

[前端交互 Skills] /page-mascot  
@nilbuild


这个 Skills 也太萌了！在网页角落放一只会盯着你光标转头的 Q 版小动物，点它会眨眼、冒红心，连点四次还会晕 😁😁😁

预置 52 个角色（20 动物 + 19 人物 + 13 机器人/物品），开箱即用。另有六种渲染风格：colour（故事书贴纸，默认）、ink（钢笔排线）、sketch（铅笔）、riso（双色孔版印刷）、paper（剪纸拼贴）、pixel（16 位像素）。因为风格只改渲染不改形状和构图，所以不会破坏对齐。

Skills 使用方法：/page-mascot 你想要的角色

它的工作方式是两张 3×3 精灵图（sprite sheet）+ background-position 换格：
· 方向表：九个头部朝向（上/下/左/右/四个斜角/正面），身体完全不变，只有头在转；
· 表情表：九格全部正面，分别是眨眼、红心、星星、眩晕、睡觉等表情。

background-size: 300% 300% 让每个格子恰好落在 0% / 50% / 100% 三个档位上，切帧就是改一个 CSS 属性，浏览器合成器直接处理，不存在逐帧 JS。

开源地址：https://github.com/nilbuild/page-mascot