仿写可爱的卸载动画
更新时间：2025-04-02 01:45 浏览量：4
最近刷B站看到一个卸载动效，感觉相当有意思，所以试着仿写了一个。
原动画效果1.效果分析与拆解
（1）面部颜色线性渐变跟随。
（2）脸颊,眼球局部区域转动跟随 & 眼球大小变化
（3）嘴巴radius变化
2.代码实现
（1）面部颜色线性渐变跟随。实际上，颜色是根据 X 轴的变化而变化的，所以，我们需要建立一种线性映射关系。这里使用CSS linear-gradient属性 结合 HSL 颜色模型来实现。通过调节变量min，max来设置颜色的色相范围。
（2）脸颊,眼球局部区域转动跟随 & 眼球大小变化。这里同样是建立一种线性映射关系。XY轴同时变化。 通过transform来控制绝对定位的眼球以及脸颊
（3）嘴巴radius变化。通过控制div元素的四个border-radius来实现对嘴部变化的控制。
至此所有关键点都已经实现了。仔细观察其实还有很多小细节没有去实现，我就懒得去做了。