制作出多个不同比例的静态饼图

 2016-10-01 13:56

我在之前的文章《画个饼图做成CSS进度指示器了》中曾做了一个动态的饼图:

但我最初的目的是想做一个静态的、便于维护的静态代码,就像这样:

<div class="bingtu">20%</div>
<div class="bingtu">60%</div>

其实,我们无法用内联的方式来控制伪元素,因此我们需要另寻新的方法。

解决方案就是让动画处于暂停状态。和常规做法不同的是,这里我们要运用负的动画延时来直接跳至动画中的任意时间点,并定格在那里。有点难明白,那么我们先看看负的animation-delay是如何在规范中解释的吧。

一个负的延迟值是合法的。于0s的延时类似,它意味着动画会立刻开始播放,但会自动前进到延时值的绝对值处,就好像动画在过去已经播放了指定的时间一样。因此实际效果就是动画跳过指定时间而从中间开始播放了。

——CSS动画(第一版)

因为我们的动画是暂停的,所以动画第一帧(由负的animation-delay值定义)将使唯一显示出来的那一帧。在饼图上显出的比率就是我们的animation-delay值在总的动画持续时间中所占的比率。

举例来说,如果有个6s的动画,我们要得到20%的比例,就只需要把animation-delay值设置为-1.2s。为了简化这个设置过程,我们可以设置一个长达100s的持续时间。

那么还有剩下一个问题:动画是在伪元素上,但我们希望内联关系是在.bingtu元素上。因为<div>上没有任何动画效果,我们可以把它先放在<div>上,然后在伪元素上应用的animation-delay:inherit;属性。其html结构代码就变成这样:

<div class="bingtu" style="animation-delay:-20s"></div>
<div class="bingtu" style="animation-delay:-60s"></div>

然后在源CSS代码里变更下:

 /* 动画不变 */
.bingtu::before{
    /* 上面都不变 */
    animation: spin 50s linear infinite,
    bg 100s step-end infinite;
    animation-play-state:paused;
    animation-delay:inherit;
}

最终我们得到的效果:

当然,我们还可以做一些优化:

  • 我们可以用JQ写个简单的内嵌,将它变为一开始那种格式;

  • 图形的高度和宽度一般是随着一些东西变化的,所以可以用em格式该成动态。


另外,《CSS揭秘》书中还提到过一个用SVG来做的方法,因为内容量太大,我没有细细阅读,等以后用到时在详细思考吧。

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: