如何实现页面中的小动画,动画按钮 CSS JS
最近在看线上服务器的时候,无意间发现一个好玩的东西,看下图:
一个是阿里云的动画
一个是腾讯云的动画
现象
因为我一直想实现这样的功能用于我日记应用的天气图标中,也一直没有思路,真是得来全不费工夫。
所以我好好研究了一下它的实现方式,有两种,
- 一种是通过 js
- 一种是通过 css
一、背景
两种实现方式都采用了逐帧动画的原理,底图是一张完整动画帧的拼接
二、动画原理
动画的实现就是变换呈现给用户的图片位置,来实现动画的展示,这也是所有视频和动画的原理。
阿里云用的是通过 js 来变换画面位置
而腾讯云则用的 css 动画来实现的变换,我更喜欢 css 来实现的这种方式。更合理。效果更好。
具体怎么实现的等我研究研究再写上来,现在只是先写这个问题
三、css 实现动画
等我研究研究,主要是用到 animation
中的 steps()