CSS3手机端弹性Loading动效
手机界面上的动效里，这种像橡皮瓶一样来回弹的 CSS3 loading 特效真挺常见的。两头先大后小，再小变大，循环个不停，看着就有节奏感，适合加载时提升用户等待体验。嗯，动效流畅，结构也不复杂，用在 H5 页面上，挺加分的。
用的是HTML5 + CSS3 + JS这一套组合，浏览器兼容性还不错，移动端主流设备基本都能稳稳跑起来。加载过程不吃性能，写法也比较清晰，不像有些动画搞得一堆复杂逻辑，看着都头大。
要是你在做移动端 Web App，或者那种纯前端页面，这种小动效就挺实用。可以搭在 loading 阶段，也能嵌在弹窗或组件加载时，视觉体验立马高级不少。
相关的动画效果你也可以看看下面这些：有探索 CSS3/HTML5 时钟 动画的（点这里），还有比较系统的 HTML5 & CSS3 例子（点这里），源码和学习笔记也都有整理，想深入了解的可以多翻翻。
如果你平时就喜欢折腾点酷炫动效，或者项目里有点空白的等待时间，那这个 CSS3 loading 特效值得你试试。样式轻，动画顺，还挺有科技感的。
文件大小：5.55KB
评论区