仿写可爱的卸载动画

更新时间：2025-04-02 01:45  浏览量：21

最近刷B站看到一个卸载动效，感觉相当有意思，所以试着仿写了一个。

1.效果分析与拆解

（1）面部颜色线性渐变跟随。

（2）脸颊,眼球局部区域转动跟随 & 眼球大小变化

（3）嘴巴radius变化

2.代码实现

（1）面部颜色线性渐变跟随。实际上，颜色是根据 X 轴的变化而变化的，所以，我们需要建立一种线性映射关系。这里使用CSS linear-gradient属性 结合 HSL 颜色模型来实现。通过调节变量min，max来设置颜色的色相范围。

（2）脸颊,眼球局部区域转动跟随 & 眼球大小变化。这里同样是建立一种线性映射关系。XY轴同时变化。 通过transform来控制绝对定位的眼球以及脸颊

（3）嘴巴radius变化。通过控制div元素的四个border-radius来实现对嘴部变化的控制。

至此所有关键点都已经实现了。仔细观察其实还有很多小细节没有去实现，我就懒得去做了。