CSS实现Loading加载动画
2023-02-18 15:28:51 时间
优秀的前端工程师总是优先考虑用CSS替代图片:
效果图如上。这个动画并非GIF,而是纯CSS绘制,通过JavaScript定时器更新动画。
基本思路是创建8个圆形div,绝对定位排列成圆圈,然后,依次通过opacity属性更新透明度,就得到一个loading的效果图。
和GIF相比,CSS实现的好处主要在于,对于不同背景颜色,该动画都是完美的,还可以用CSS轻松实现阴影、发光等特效,而GIF虽然支持透明色,但创建时选择的背景色和实际背景色不一致会导致有明显的毛边,而且GIF不易动态更新,需要重新生成图片。
CSS方式完全可以通过包装成jQuery插件实现非常简单却异常强大的loading动画,缺点是IE不支持border-radius,所以IE下看到的是方块。
如果你不想自己写代码,这里有一个可视化在线生成CSS3 Loading动画的网站,相当强大:
http://fgnass.github.io/spin.js/
生成的代码除了在现代浏览器中正常工作外,还可以使用VML来兼容落后的IE浏览器,最低兼容到IE6!
相关文章
- 听说面试官喜欢问这些MySQL知识
- 面试官最喜欢问的Redis知识
- Paxos与Zookeeper分布式一致性面试必备
- 前端面试之CSS重点概念精讲
- 2022-12-19:大的国家。如果一个国家满足下述两个条件之一,则认为该国是 大国 : 面积至少为 300 万平方公里(即,3000000 km2),或者 人
- 计算机底层知识之CPU
- 计算机底层知识之二进制
- 计算机底层知识之处理小数
- 计算机底层知识之内存
- 计算机底层知识之内存和磁盘的关系&数据压缩
- 计算机底层知识之运行环境&可执行文件
- 计算机底层知识之操作系统
- 计算机底层知识之汇编语言
- 【Ruby高级技术】对面向对象里的控制访问,包括类的继承类常量的深入理解和使用
- React源码分析--state计算流程和优先级
- 面试官:说说你对react生命周期的理解
- 面试官:说说react的渲染过程
- 前端工程师leetcode算法面试--二分搜索算法(上)
- 前端刷完这12道滑动窗口,是不是就可以出山面试了
- 三顾茅庐,七面阿里,25k*16offer,还原我的大厂面经