使用CSS3制作饼状旋转载入效果的实例

今天，要实现一个长任务等待提示效果。

　　然后设计师就把做好的gif效果图给我，就是下面这个：

　　按照大众做法，我应该是把图片直接按图索骥，调调布局，然后早早回家抱老婆。

　　但是，我这个人，天生不安分守己。想到是用在客户端，客户端又是用的webkit内核，于是，立马决定使用CSS3来折腾一番。

　　外面的光环很好实现，360度转转转就OK. 但是，中间那个鸡蛋转转转的可不是好啃的骨头啊。人家师傅饼前一分钟，饼下十年功啊。

　　我生小辈想要习得这转饼的精髓，可得要好生琢磨一番啊!

　　如果您手头的是IE10+这类支持animation的现代浏览器，您可以狠狠地点击这里：CSS3饼状图loading旋转动画demo

　　截图是死的，demo是活的。建议点上面的地址去仔细对比CSS3实现和gif动画效果。

　　不难发现，这个gif尺寸又大，效果也不流畅，还烧性能。相比之下，立马被CSS3实现甩出了2条南京路。

　　CSS3效果更佳、性能更高、资源占用更少大家都认同了。关键是，这个大饼它是怎么转起来的?

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

　　略复杂。

　　蛋饼旋转技能传授

　　师父领进门修行在个人，