今日，要完成1个长每日任务等候提醒实际效果。
随后设计方案师就把做好的gif实际效果图给我，便是下面这个：
依照大家做法，我应当是把照片立即按图索骥，调调合理布局，随后早早回家了抱老婆。
可是，我这本人，与生俱来躁动不安分守己。想起是用在顾客端，顾客端又是用的webkit核心，因而，立马决策应用CSS3来折腾1番。
外面的光环很好完成，360度转转转就OK. 可是，正中间那个鸡蛋转转转的可并不是好啃的骨头啊。人家师傅饼前1分钟，饼下10年功啊。
我生晚辈要想习得这转饼的精粹，可得好些生揣摩1番啊！
假如您手头的是IE10+这类适用animation的当代访问器，您能够狠狠地址击这里：CSS3饼状图loading转动动漫demo
截图是死的，demo是活的。提议点上面的详细地址去细心比照CSS3完成和gif动漫实际效果。
不难发现，这个gif规格又大，实际效果也不顺畅，还烧特性。相比之下，立马被CSS3完成甩出了2条南京路。
CSS3实际效果更佳、特性更高、資源占有更少大伙儿都认同了。重要是，这个大饼它是如何转起来的？
略繁杂。
蛋饼转动专业技能教给
师父领进门修行在本人，听不懂我也没法啦~~
大家肉眼看上去是1个鸡蛋被摊在了全部饼上，具体上，这只是个障眼法。
具体摊的鸡蛋，仅有半个饼那末大。也有半个饼部位是长得像鸡蛋的假鸡蛋和长得像大饼的假大饼。明显这句话你听不懂，由于我自身都没听懂，哈哈~~所谓1图胜千言，示用意走起~
下图示意的便是鸡蛋饼上的鸡蛋从100%缩小成0的全过程。
1. 这是沒有影响的蛋饼，你看到的是半个假饼和半个假蛋。
2. 当大家煎饼动漫转起的1一瞬间，大家让假的饼子掩藏回家了打酱油去。因而，从上面看，大家看到的便是满满1层的鸡蛋。
3. 真鸡蛋转起，你会发现，半个真鸡蛋，因为逆时针转动，露出了点空（左边上部）。
demo对应实际效果相近(浅色系当做鸡蛋)：
4. 认真鸡蛋转动了180度（半圈）的情况下，真伪鸡蛋恰好重叠在了1起，因而便是看到的便是蛋饼上半面鸡蛋。
demo对应实际效果相近：
demo对应实际效果相近：
6. 1直转动到360度，其彻底被假的饼子遮住，1点鸡蛋都看不见了。进行了从所有都0的动漫全过程。这便是蛋饼转转转的基础基本原理。
CSS3表明
可见，要完成大家要想的蛋饼实际效果，大家必须这些物品：
圆形的蛋饼子 – 对应下面类名为inner元素
转动的半面真鸡蛋 – 对应下面类名为spiner的元素
没动的半面蛋饼子，前半程掩藏，后半程出現 – 对应下面类名为masker的元素
没动的半面假鸡蛋，前半程出現，后半程掩藏 – 对应下面类名为filler的元素
inner关键完成圆和情况色；
spiner关键完成半圆的360度逆时针转动，其情况色有别于父元素的情况色；
filler半圆，精准定位在右边，与转动元素一样情况色；后边的180度掩藏；
masker半圆，精准定位在左边，与大情况色色值同样；转动前180度掩藏，以后显示信息遮住；
在其中，360度转动CSS编码以下：
由于是逆时针，因此是从360deg到0deg.
前半程出現，后半程掩藏，能够依靠animation step有关的timing function完成，编码以下：
后半程显示信息则是：
因而，大家要是加个动漫時间，和无尽实行就OK啦~~
别的细节全是精准定位甚么的，很基本的专业知识，就不唠叨啦~~
饼实际上都还没做好
啊，捣鼓了这么久都还没完毕啊？
没错。细心查询gif动漫，你会发现，蛋饼它是从全盘都0再到全部360度遮盖的。
而，上午捣鼓的动漫只是从360度无死角遮盖到0遮盖。1旦遮盖完毕，就又要走360度刚开始，不连贯性，如何破？
我是这么解决的：
再遮盖1个蛋饼从0度到360度展现的动漫。与1直捣鼓的动漫前后左右半程各自展现便可以了。
因而，最后有以下HTML:
inner和inner2也应用的前后左右半程掩藏的动漫，动漫時间恰好是1个周期的2倍。
因而，就有了完善的做蛋饼实际效果了。