网页上的icon动画效果是怎么做的？
时间：2023-12-28 16:30:01 | 来源：网站运营
时间：2023-12-28 16:30:01 来源：网站运营
网页上的icon动画效果是怎么做的？：你可以谷歌浏览器调试器看一下阿里云网站的源码。点开资源管理，找到这个地方的源码，是根据鼠标状态动态控制雪碧图的位置，来实现icon的变换的，如下图：
鼠标移到图标上固定到雪碧图的最后位置，从图标上移开固定回原开始位置。
icon雪碧图制作方法参考：
制作有很多方法，可以考虑先用
AI做出图标，再将图标导入
AE做出动态效果，导出为
PNG序列，使用
PS制作成逐帧的长图，最后放入页面资源，用
JS动态控制鼠标状态与
background-position的变换就可以了。
动画效果的其他实现方法：
其他方法，比如这里应该也可以考虑调用CSS3提供的过渡动画的方法实现，但是阿里应该是考虑到浏览器的兼容性，所以使用了这种逐帧图标动画的实现方法。
在线咨询
