css制作饼状图的方法

　　介绍

这篇文章主要介绍了css制作饼状图的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

前言:

在工作中,有时我们会有饼状图的需求,如统计图表,进度指示器,定时器等,当然,实现方式也有很多,甚至有现成的js库可以拿来直接使用。兴趣使然,自己动手利用纯css实现饼状图,看看效果如何。

& lt; div类=皃ie"祝辞& lt;/div> 。派{ 　　宽度:100 px; 　　身高:100 px; 　　这个特性:50%; 　　背景:黄绿色; 　　背景图片:线性梯度(50%正确,透明,# 655 0); 　　} 　　 　　{前.pie:: 　　内容:& # 39;& # 39;; 　　显示:块; 　　margin-left: 50%; 　　高度:100%; 　　0/50% border - radius: 0 100% 100%; 　　background - color:继承; 　　transform-origin:左; 　　变换:旋转(.2turn); 　　}

效果:

css制作饼状图的方法

改变旋转的角度就可以实现不同大小的饼状图效果,但是亲手试验的读者会发现,旋转50%以上并不能呈现出理想的效果,而是会呈现出如下效果:

css制作饼状图的方法

要解决这个问题,改变伪元素的背景色就可以解决,当需要展示的区域大于一半时,改变背景色就好。

下面笔者展示一个简单的进度指示器示例,读者亲手试验的话,会发现一个不断变化的饼状图效果。

。派{ 　　宽度:100 px; 　　身高:100 px; 　　这个特性:50%; 　　背景:黄绿色; 　　背景图片:线性梯度(50%正确,透明,# 655 0); 　　} 　　 　　{前.pie:: 　　内容:& # 39;& # 39;; 　　显示:块; 　　margin-left: 50%; 　　高度:100%; 　　0/50% border - radius: 0 100% 100%; 　　background - color:继承; 　　transform-origin:左; 　　动画:旋转3 s线性无限,bg 6 s step-end无限; 　　} 　　@keyframes旋转{ 　　{变换:旋转(.5turn);} 　　} 　　@keyframes bg { 　　50%{背景:# 655;} 　　}

效果如下:

css制作饼状图的方法

读者最好亲手试验,尝试修改其中的属性,理解其中的意思,只有理解了才能做出更有趣的东西。如果读者对svg感兴趣的话,可以尝试使用svg来实现饼状图,svg实现的效果要更加丰富多彩些。

感谢你能够认真阅读完这篇文章,希望小编分享css制作饼状图的方法内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!

css制作饼状图的方法