达州做网站
大橙子网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
如何使用CSS3制作饼状旋转载入效果
这篇文章主要介绍“如何使用CSS3制作饼状旋转载入效果”，在日常操作中，相信很多人在如何使用CSS3制作饼状旋转载入效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用CSS3制作饼状旋转载入效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了永靖免费建站欢迎大家使用！
今天，要实现一个长任务等待提示效果。
然后设计师就把做好的gif效果图给我，就是下面这个：
按照大众做法，我应该是把图片直接按图索骥，调调布局，然后早早回家抱老婆。
但是，我这个人，天生不安分守己。想到是用在客户端，客户端又是用的webkit内核，于是，立马决定使用CSS3来折腾一番。
外面的光环很好实现，360度转转转就OK. 但是，中间那个鸡蛋转转转的可不是好啃的骨头啊。人家师傅饼前一分钟，饼下十年功啊。
我生小辈想要习得这转饼的精髓，可得要好生琢磨一番啊！
如果您手头的是IE10+这类支持animation的现代浏览器，您可以狠狠地点击这里：CSS3饼状图loading旋转动画demo
截图是死的，demo是活的。建议点上面的地址去仔细对比CSS3实现和gif动画效果。
不难发现，这个gif尺寸又大，效果也不流畅，还烧性能。相比之下，立马被CSS3实现甩出了2条南京路。
CSS3效果更佳、性能更高、资源占用更少大家都认同了。关键是，这个大饼它是怎么转起来的？
略复杂。
蛋饼旋转技能传授
师父领进门修行在个人，听不懂我也没办法啦~~
我们肉眼看上去是一个鸡蛋被摊在了整个饼上，实际上，这只是个障眼法。
实际摊的鸡蛋，只有半个饼那么大。还有半个饼位置是长得像鸡蛋的假鸡蛋和长得像大饼的假大饼。显然这句话你听不懂，因为我自己都没听懂，哈哈~~所谓一图胜千言，示意图走起~
下图示意的就是鸡蛋饼上的鸡蛋从100%变小成0的过程。
1. 这是没有干扰的蛋饼，你看到的是半个假饼和半个假蛋。
2. 当我们煎饼动画转起的一瞬间，我们让假的饼子隐藏回家打酱油去。于是，从上面看，我们看到的就是满满一层的鸡蛋。
3. 真鸡蛋转起，你会发现，半个真鸡蛋，由于逆时针旋转，露出了点空（左侧上部）。
demo对应效果类似(浅色看成鸡蛋)：
4. 当真鸡蛋旋转了180度（半圈）的时候，真假鸡蛋正好重合在了一起，于是就是看到的就是蛋饼上半面鸡蛋。
demo对应效果类似：
demo对应效果类似：
6. 一直旋转到360度，其完全被假的饼子遮盖，一点鸡蛋都看不到了。完成了从全部都0的动画过程。这就是蛋饼转转转的基本原理。
CSS3表示
可见，要实现我们想要的蛋饼效果，我们需要这些东西：
圆形的蛋饼子 – 对应下面类名为inner元素
旋转的半面真鸡蛋 – 对应下面类名为spiner的元素
不动的半面蛋饼子，前半程隐藏，后半程出现 – 对应下面类名为masker的元素
不动的半面假鸡蛋，前半程出现，后半程隐藏 – 对应下面类名为filler的元素
CSS Code复制内容到剪贴板