demo对应效果类似：
6. 一直旋转到360度，其完全被假的饼子遮盖，一点鸡蛋都看不到了。完成了从全部都0的动画过程。这就是蛋饼转转转的基本原理。
CSS3表示
可见，要实现我们想要的蛋饼效果，我们需要这些东西：
圆形的蛋饼子 – 对应下面类名为inner元素
旋转的半面真鸡蛋 – 对应下面类名为spiner的元素
不动的半面蛋饼子，前半程隐藏，后半程出现 – 对应下面类名为masker的元素
不动的半面假鸡蛋，前半程出现，后半程隐藏 – 对应下面类名为filler的元素
CSS Code复制内容到剪贴板
<div class="inner">
<div class="spiner"></div>
<div class="filler"></div>
<div class="masker"></div>
</div>
inner主要实现圆以及背景色；
spiner主要实现半圆的360度逆时针旋转，其背景色有别于父元素的背景色；
filler半圆，定位在右侧，与旋转元素同样背景色；后面的180度隐藏；
masker半圆，定位在左侧，与大背景色色值相同；旋转前180度隐藏，之后显示遮盖；
其中，360度旋转CSS代码如下：
CSS Code复制内容到剪贴板
@keyframes spin {
0% { transform: rotate(360deg); }
100% { transform: rotate(0deg); }
}
因为是逆时针，所以是从360deg到0deg.
前半程出现，后半程隐藏，可以借助animation step相关的timing function实现，代码如下：
CSS Code复制内容到剪贴板
@keyframes second-half-hide {
0% { opacity: 1; }
50%, 100% { opacity: 0; }
}
后半程显示则是：
CSS Code复制内容到剪贴板
@keyframes second-half-show {
0% { opacity: 0; }
50%, 100% { opacity: 1; }
}
