通过CSS制作任意比率饼状图

状图在网页中的运用极为普遍，比如简单的统计图表、进度指示器、定时器等，通常人们会用图像处理软件来制作，那么今天我们一起学习下如何通过纯CSS的方法来实现任意比率的饼状图。

知识点：

CSS线性渐变:linear-gradient;
CSS动画:@keyframes规则和animation引用；

1、固定比率（<=50%）的饼状图

首先我们制作一个绿色背景的圆形

HTML
 <div class="pie></div>
CSS
 .pie{
 width: 500px;
 height: 500px;
 background: yellowgreen;
 border-radius: 50%;
 }

如果我们打算用棕色（#655）来表示比率的话，那么需要先把上面圆形的一半设置为棕色，只需要一个简单的线性渐变即可实现：

background-image： 
 linear-gradient(to right, transparent 50%, #655 0);

接着我们通过设置伪元素的样式（背景颜色与圆形背景颜色相相同：yellowgreen）将棕色部分进行遮盖，添加代码如下：

.pie::before{
 content: '';
 display: block;
 margin-left: 50%;
 height: 100%;
 background: yellowgreen;
 }

然后去掉矩形突出圆形的多余部分，可以给 .pie 设置 overflow： hidden，或是给伪元素指定合适的border-radius属性来把它变成一个半圆。

pie::before{
 content： '';
 display: block;
 margin-left: 50%;
 height：100%；
 background：yellowgreen；
 border-radius:0 100% 100% 0/50%;
 }

最后，我们可以通过rotate（）旋转属性让这个伪元素转起来，当然我们希望它是绕着圆形的中心来旋转的，对他自己来说，这个旋转中心就是它左边缘的中心点，因此，可以把它的 transform-origin 设置为：0 50%，或者干脆写成left也可以。如果我们要显示出30%的比率，就可以指定其旋转值为108deg（30% × 360=108）。

pie::before{
.content: '';
display: block;
margin-left: 50%；
height： 100%；
background：yellowgreen；
border-radius:0 100% 100% 0/50%;
transform-origin: left;
transform: rotate(108deg);

2、固定比率（>=50%）的饼状图

如果不加修改直接用上面的方法来制作比率大于50%的饼状图，你会发现一个明显的bug，如下图显示60%的比率时所出现的问题，本该显露的部分不但没有显示出来已有的部分反而被覆盖了一部分。

要解决这个问题很简单，将覆盖层即伪元素部分的背景颜色修改为棕色（#655），在旋转时只需旋转大于50%的部分，如：要显示60%的比率时只需要旋转10%的度数36°即可

.pie::before{
content: '';
display: block;
margin-left: 50%;
height: 100%;
background: #655;
border-radius:0 100% 100% 0/50%;
transform-origin: left;
transform: rotate(36deg);
}

3、比率从0到100%动态显示

通过上面两种方法我们已经可以实现任意比率的饼状图了，那么结合CSS的动画属性便可以实现一个饼状图从0变化到100%的动画（也可以看做是一个进度指示器）。

@keyframes scoll{
to{transform: rotate(180deg);}
}

@keyframes bg{
50%{background: #655;}
}

.pie::before{
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius:0 100% 100 0/50%;
background: yellowgreen;
animation: 
scoll 3s linear infinite,
bg 6s step-end infinite;
}

4、通过负的动画延时实现任意比率的静态饼状图

既然我们已经可以动态显示从0到100%比率的饼状图，在此基础上如果可以让动画根据需要定格在某一时刻，那么就不用再像方法1和方法2那样区别对待50%前后的两种情况了。这里我们可以用负的动画延时来直接眺至动画中的任意时间点，并通过暂停属性paused把它定格在那里。

假设动画持续时间为100s，那么只需要把animation-delay设置为-30s，就可以显示出30%的比率了(如果是-60s就表示60%比率）。

.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

2.效果图1

3.代码：保存为html，用浏览器打开即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圆形百分比进度条效果</title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.bg{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			background: #ccc;
			position: relative;
			margin: 20px auto;
		}
		.circle-right, .circle-left, .mask-right, .mask-left{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.circle-right, .circle-left{
			background: skyblue;
		}
		.mask-right, .mask-left{
			background: #ccc;
		}
		.circle-right, .mask-right{
			clip: rect(0,200px,200px,100px);
		}
		.circle-left, .mask-left{
			clip: rect(0,100px,200px,0);
		}
		.text{
			width: 160px;
			height: 160px;
			line-height: 160px;
			text-align: center;
			font-size: 34px;
			color: deepskyblue;
			border-radius: 100%;
			background: #fff;
			position: absolute;
			top: 20px;
			left: 20px;
		}
		</style>
	</head>
	<body>
		<div class="bg">
			<div class="circle-right"></div>
			<!--100%是显示百分数，动态显示由0~100-->
			<div class="text">100%</div> 

		</div>
		
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){				
				//获取百分比值
				var num=parseInt($('.text').html());
				
				//通过计时器来显示过渡的百分比进度
				var temp=0;
				var timer=setInterval(function(){
					calculate(temp);
					//清除计时器结束该方法调用
					if(temp==num){
						clearInterval(timer);
					}
					temp++;
				},30)

				//改变页面显示百分比
				function calculate(value){
					//改变页面显示的值
					$('.text').html(value + '%');
					
					//清除上次调用该方法残留的效果
					$('.circle-left').remove();
					$('.mask-right').remove();
					
					//当百分比小于等于50
					if(value <=50){
						var html='';
						
						html +='<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						
						//元素里添加子元素
						$('.circle-right').append(html);
					}else{
						value -=50;
						var html='';
						
						html +='<div class="circle-left">';
						html +='<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						html +='</div>';
						
						//元素后添加元素
						$('.circle-right').after(html);
					}
				}
			})
		</script>
		
	</body>
</html>

4.拆分法：把一个含有css和js（JavaScript）的html，拆掉三个文件，一个叫cirbar1.html,另外的叫：cirbar1.css和cirbar1.js文件，放在同一个文件夹内。这是./的意思，也可以指定文件夹。

4.1 cirbar1.html的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圆形百分比进度条效果v2</title>
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->
		<!--style type="text/css"-->
		<link href="./cirbar1.css" rel="stylesheet" />
	</head>
	<body>
		<div class="bg">
			<div class="circle-right"></div>
			
			<div class="text">100%</div> 
		</div>
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->
		<!--script type="text/javascript"-->
		<script src="./cirbar1.js"></script>
	</body>
</html>

4.2 cirbar1.css的代码：

		*{
			margin: 0;
			padding: 0;
		}
		.bg{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			background: #ccc;
			position: relative;
			margin: 20px auto;
		}
		.circle-right, .circle-left, .mask-right, .mask-left{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.circle-right, .circle-left{
			background: skyblue;
		}
		.mask-right, .mask-left{
			background: #ccc;
		}
		.circle-right, .mask-right{
			clip: rect(0,200px,200px,100px);
		}
		.circle-left, .mask-left{
			clip: rect(0,100px,200px,0);
		}
		.text{
			width: 160px;
			height: 160px;
			line-height: 160px;
			text-align: center;
			font-size: 34px;
			color: deepskyblue;
			border-radius: 100%;
			background: #fff;
			position: absolute;
			top: 20px;
			left: 20px;
		}

4.3 cirbar1.js的代码：

			$(function(){				
				//获取百分比值
				var num=parseInt($('.text').html());
				
				//通过计时器来显示过渡的百分比进度
				var temp=0;
				var timer=setInterval(function(){
					calculate(temp);
					//清除计时器结束该方法调用
					if(temp==num){
						clearInterval(timer);
					}
					temp++;
				},30)

				//改变页面显示百分比
				function calculate(value){
					//改变页面显示的值
					$('.text').html(value + '%');
					
					//清除上次调用该方法残留的效果
					$('.circle-left').remove();
					$('.mask-right').remove();
					
					//当百分比小于等于50
					if(value <=50){
						var html='';
						
						html +='<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						
						//元素里添加子元素
						$('.circle-right').append(html);
					}else{
						value -=50;
						var html='';
						
						html +='<div class="circle-left">';
						html +='<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						html +='</div>';
						
						//元素后添加元素
						$('.circle-right').after(html);
					}
				}
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->
<!DOCTYPE html> 

<!--第2步---html大框架-->
<html lang="en">

<!--第2-1步---head部分-->
<head>
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->
    <meta charset="utf-8" />
    <!--第2-1-2步---标题名称-->
    <title>圆形进度条v1</title>
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->
    <!--第2-1-3步---导入css文件-->
    <link href="./cirbar.css" rel="stylesheet" />
</head>

<!--第2-2步---body部分-->
<body>
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>
    <!--第2-2-2步---导入js文件部分-->
    <script src="./cirbar.js"></script>

<!--注意收尾-->
</body>
<!--注意收尾-->
</html>

6.2 cirbar.css代码：

.canvas {
            /*画布的背景颜色设置为：黑色*/
            background:#303030;
            
        }

6.3 cirbar.js代码：

window.onload=function () {
            var canvas=document.getElementById('canvas'),  //获取canvas元素
                context=canvas.getContext('2d'),  //获取画图环境，指明为2d
                centerX=canvas.width / 2,   //Canvas中心点x轴坐标
                centerY=canvas.height / 2,  //Canvas中心点y轴坐标
                rad=Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
                speed=0.1; //加载的快慢就靠它了
            //绘制红色外圈
            function blueCircle(n) {
                context.save();
                context.strokeStyle="	#1E90FF"; //随百分数转动的外圈的颜色为蓝色
                context.lineWidth=3; //设置线宽
                context.beginPath(); //路径开始
                //注意-为顺时针，+为逆时针
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false); 
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false); 
                context.stroke(); //绘制
                context.closePath(); //路径结束
                context.restore();
            }
            //绘制白色外圈，初始的白色外圈
            function whiteCircle() {
                context.save();
                context.beginPath();
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样
                //context.strokeStyle="#F8F8FF";
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);
                context.stroke();
                context.closePath();
                context.restore();
            }
            //百分比文字绘制
            function text(n) {
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
                context.strokeStyle="#7FFF00";//设置中间动态百分数的颜色
                context.font="25px Arial"; //设置字体大小和字体
                context.textAlign='center';//字体水平居中
                context.textBaseline='middle';//字体垂直居中
                //绘制字体，并且指定位置
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);
                context.stroke(); //执行绘制
                context.restore();
            }
            //循环获取
            (function drawFrame() {
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);
                whiteCircle();
                text(speed);
                blueCircle(speed);
                if (speed < 100) {
                    //1可从后台获取值,也是从0~100，step为1，代表速度
                    speed +=1;
                }
            }());
        }

注意到6.3js文件与4.3js文件的区别了么？一个有：window.onload=，一个没有，且只有$和小括号，因为外部的就是文件定义了一部分功能。

.说明：

推荐指数：★★★★

通过动画太极的方法，增加学习兴趣，对html的结构和css、JavaScript、div的认识和了解会逐步深入。

2.复习html的结构框架

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>html结构基本框架代码</title>
    </head>
    
    <body>
    </body>

</html>

3 div法

3.1 代码：复制下面的代码，命名为：div法.html，用浏览器打开即可。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>div法的旋转的太极图</title>
</head>
<!--单独style，不在head和body，只是在body内有一个div容器-->
<style>
div{
    width: 0;
    /*这个高就是黑色圆形和白色圆形的直径和*/
    height: 200px;
    /*黑色太极部分的圈带动的黑色的阴影*/
    border-left: 100px solid black;
    /*白色太极部分的圈带动的白色的阴影*/
    border-right: 100px solid #fff;
    box-shadow: 0 0 15px rgba(0,0,0,.5);
    /*旋转半径100*/
    border-radius: 100px;
    /*旋转速度定义,越小越快*/
    -webkit-animation:rotation 2.5s linear infinite;
}
div:before{
    content: "";
    position: absolute;
    height: 100px;

    z-index: 1;
    border-radius: 100px;
    /*白色的小半圆*/
    border-left: 50px solid #fff;
    border-right: 50px solid #fff;
    left: -50px;
    /*黑色的小半圆，因为转动拖动黑色阴影*/
    box-shadow: 0 100px 0 black;
}
div:after{
    content: "";
    position: absolute;
    /*height是太极里面小圆圈的高30，要和border-radius30一致，才画出圆*/
    height: 30px;
    /*这个是显示小圆圈的,0就是不显示*/
    z-index: 1;
    border-radius: 30px;
    border-left: 15px solid;
    border-right: 15px solid;
    /*top和left，决定小圆圈白色和黑色的位置*/
    top: 40px;
    left: -15px;
    /*黑色太极部分里面的小白色圆圈*/
    box-shadow: 0 100px 0 white;
}
/*旋转角度函数定义*/
@-webkit-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);}
    100% {-webkit-transform:rotate(-360deg);}
}
</style>

<body>
    <div></div>
</body>

</html>

3.2 效果图

4 css法

4.1 css法.html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css法的旋转的太极图</title>
    <!--css导入和js导入不一样，请注意-->
    <!--script-- src="./tj.css"></!--script-->
    <link rel="stylesheet" type="text/css" href="./tj.css">
</head>
<body>
    <div class="tj"></div>
    
</body>
</html>

4.2 tj.css代码：注意与上面两个文件放在同一个文件夹下


.tj{
    width: 100px;
    height: 200px;
    border: solid black;
    border-width: 2px 100px 2px 2px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    /*run是动起来的函数，在最后面设置和定义*/
    animation: run 2s linear infinite;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.tj:before{
    content: " ";
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: black;
    /*36=(100-28)/2得到的，是小白色圆圈的半径*/
    border: 36px #ffffff solid;
    border-radius: 50%;
    top: 0;
    left: 50%;
}
.tj:after{
    content: " ";
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: #ffffff;
    /*36=(100-28)/2得到的，是小黑色圆圈的半径*/
    border: 36px black solid;
    border-radius: 50%;
    top: 50%;
    left: 50%;
}
/*run动起来的函数定义*/
@keyframes run{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }

4.3 效果图

5 js法=就是JavaScript法

5.1 js法.html代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>js法的旋转的太极图</title>
        <!--注意下面2钟都可以，主要是浏览器都支持html5-->
        <!--script-- src="script.js" type="text/javascript"></!--script-->
        <script src="./script.js"></script>
        <!--简单的css内容就这样写在下面，如果css比较复杂，则需要外部导入-->
        <style type="text/css">
            canvas{
                display: block;
                margin: 20px auto;
                
            }
        </style>
    </head>

    <body onload="main()">
        <!--画布大小,画布框的线颜色蓝色设置，solid blue是指画布外框的颜色为蓝色-->
        <canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>
    </body>

</html>

5.2 script.js代码：与上面html放在同一个文件夹下

//注意到没有null=0，效果是一样的
var angle=0;
//var canvas=null;
//var ctx=null;
var canvas=0;
var ctx=0;

function main()
{
    window.setInterval(function()
    {
        canvas=document.getElementById("canvas");
        ctx=canvas.getContext("2d");
        // 画布大小有关
        ctx.clearRect(0, 0, 300, 300);
        // 线条宽度0~10，均可
        ctx.lineWidth=0;
        ctx.save();
        // 旋转的中心点的坐标位置150,150
        ctx.translate(150,150);
        ctx.rotate(angle);
        // 太极黑色部分
        ctx.fillStyle="black";
        ctx.beginPath();
        // 注意几个函数数值的关系，120,60，半径和坐标的关系，如果要缩小半径，那么坐标也需要调整
        ctx.arc(0, 0, 120, 0, Math.PI, true);
        ctx.fill();
        ctx.closePath();
        // 太极白色部分
        ctx.fillStyle="white";
        ctx.beginPath();
        ctx.arc(0, 0, 120, 0, Math.PI, false);
        ctx.fill();
        ctx.closePath();
        // 太极黑色部分
        ctx.fillStyle="black";
        ctx.beginPath();
        ctx.arc(60, -0.6, 60, 0, Math.PI, false);
        ctx.fill();
        ctx.closePath();
        // 太极白色部分
        ctx.fillStyle="white";
        ctx.lineWidth=0;
        ctx.beginPath();
        ctx.arc(-60, 0, 60, 0, Math.PI, true);
        ctx.fill();
        ctx.closePath();
        // 白色太极部分里面的小黑色圆圈
        ctx.fillStyle="black";
        ctx.beginPath();
        //画圆的函数：-145,0是坐标，15是半径，2*Math.PI是一个圆，一个π是半圆
        ctx.arc(-60, 0, 15, 0, 2*Math.PI, false);
        ctx.fill();
        ctx.closePath();
        // 黑色太极部分里面的小白色圆圈
        ctx.fillStyle="white";
        ctx.beginPath();
        ctx.arc(60, 0, 15, 0, 2*Math.PI, false);
        ctx.fill();
        ctx.closePath();
        // 旋转角度一次增加多少
        ctx.restore();
        angle +=0.02;
    // 50代表转速，越大越慢，越小越快
    },1);
}

5.3 效果图

6 值得收藏，慢慢回味。

在线咨询

上一篇：500元价位，热销平板如何选-HI8、Iwork8简
下一篇：菜鸟裹裹消费者热线新人考试试题及答案，分享几个实用搜

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

通过CSS制作任意比率饼状图

您的项目需求