CSS3实现饼图扇形loading效果

javascript.shop

发布于 2019-09-04 15:31:03

2K0

效果：

CSS代码：

.wrap { width: 64px; height: 64px; position: relative; }
.outer { position: absolute; width: 100%; height: 100%; background: url(icon-spin-s.png) no-repeat; animation: spin 800ms infinite linear; }
.inner, .inner2 { position: absolute; width: 38px; height: 38px; border-radius: 40px; overflow: hidden; left: 13px; top: 13px; }
.inner { opacity: 1; background-color: #89abdd; animation: second-half-hide 1.6s steps(1, end) infinite; }
.inner2 { opacity: 0; background-color: #4b86db; animation: second-half-show 1.6s steps(1, end) infinite; }
.spiner, .filler, .masker { position: absolute; width: 50%; height: 100%; }
.spiner { border-radius: 40px 0 0 40px; background-color: #4b86db; transform-origin: right center; animation: spin 800ms infinite linear; left: 0; top: 0; }
.filler { border-radius: 0 40px 40px 0; background-color: #4b86db; animation: second-half-hide 800ms steps(1, end) infinite; left: 50%; top: 0; opacity: 1; }
.masker { border-radius: 40px 0 0 40px; background-color: #89abdd; animation: second-half-show 800ms steps(1, end) infinite; left: 0; top: 0; opacity: 0; }

.inner2 .spiner, .inner2 .filler { background-color: #89abdd; }
.inner2 .masker { background-color: #4b86db; }

@keyframes spin {
  0%   { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@keyframes second-half-hide {
  0%        { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes second-half-show {
  0%        { opacity: 0; }
  50%, 100% { opacity: 1; }
}

HTML代码：

<div class="wrap">
    <div class="outer"></div>
    <div class="inner">
        <div class="spiner"></div>
        <div class="filler"></div>
        <div class="masker"></div>
    </div>
    <div class="inner2">
        <div class="spiner"></div>
        <div class="filler"></div>
        <div class="masker"></div>
    </div>
</div>

下图示意的就是鸡蛋饼上的鸡蛋从100%变小成0的过程。

1. 这是没有干扰的蛋饼，你看到的是半个假饼和半个假蛋。

2. 当我们煎饼动画转起的一瞬间，我们让假的饼子隐藏回家打酱油去。于是，从上面看，我们看到的就是满满一层的鸡蛋。

3. 真鸡蛋转起，你会发现，半个真鸡蛋，由于逆时针旋转，露出了点空（左侧上部）。

demo对应效果类似(浅色看成鸡蛋)：

4. 当真鸡蛋旋转了180度（半圈）的时候，真假鸡蛋正好重合在了一起，于是就是看到的就是蛋饼上半面鸡蛋。

demo对应效果类似：

5. 此时，再继续旋转。我们让假鸡蛋隐藏，让之前打酱油的~~加饼子~~假饼子出现，覆盖部分真鸡蛋。我们就会看到，真鸡蛋面积越来越小了~

demo对应效果类似：

6. 一直旋转到360度，其完全被假的饼子遮盖，一点鸡蛋都看不到了。完成了从全部都0的动画过程。这就是蛋饼转转转的基本原理。

CSS3表示 可见，要实现我们想要的蛋饼效果，我们需要这些东西：

圆形的蛋饼子 – 对应下面类名为inner元素
旋转的半面真鸡蛋 – 对应下面类名为spiner的元素
不动的半面蛋饼子，前半程隐藏，后半程出现 – 对应下面类名为masker的元素
不动的半面假鸡蛋，前半程出现，后半程隐藏 – 对应下面类名为filler的元素

<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代码如下：

@keyframes spin {
  0%   { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

因为是逆时针，所以是从360deg到0deg.

前半程出现，后半程隐藏，可以借助animation step相关的timing function实现，代码如下：

@keyframes second-half-hide {
  0%        { opacity: 1; }
  50%, 100% { opacity: 0; }
}

后半程显示则是：

@keyframes second-half-show {
  0%        { opacity: 0; }
  50%, 100% { opacity: 1; }
}

于是，我们只要加个动画时间，以及无限执行就OK啦~~

.spiner { transform-origin: right center; animation: spin .8s infinite linear; }
.filler { animation: second-half-hide .8s steps(1, end) infinite; }
.masker { animation: second-half-show .8s steps(1, end) infinite; }

其他细节都是定位什么的，很基础的知识，就不啰嗦啦~~

饼其实还没有做好 啊，捣鼓了这么久还没有结束啊？

没错。仔细查看gif动画，你会发现，蛋饼它是从全盘都0再到整个360度覆盖的。

而，上午捣鼓的动画只是从360度无死角覆盖到0覆盖。一旦覆盖结束，就又要走360度开始，不连贯，怎么破？

我是这么处理的：再覆盖一个蛋饼从0度到360度展示的动画。与一直捣鼓的动画前后半程分别展示就可以了。

于是，最终有如下HTML:

<div class="inner">
    <div class="spiner"></div>
    <div class="filler"></div>
    <div class="masker"></div>
</div>
<div class="inner2">
    <div class="spiner"></div>
    <div class="filler"></div>
    <div class="masker"></div>
</div>

inner和inner2也使用的前后半程隐藏的动画，动画时间正好是一个周期的2倍。

.inner { opacity: 1; animation: second-half-hide 1.6s steps(1, end) infinite; }
.inner2 { opacity: 0; animation: second-half-show 1.6s steps(1, end) infinite; }

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2014年5月28日2，如有侵权请联系 cloudcommunity@tencent.com 删除

css