浅谈一下关于使用css3来制做圆环进度条

时间 2019-11-09

标签浅谈一下关于使用 css3 css 制做圆环进度栏目 CSS 繁體版

原文原文链接

最近PC端项目要作一个这样的页面出来，其余的都很简单，关键在于百分比的圆环效果。我最初打算是直接使用canvas来实现的，由于canvas实现一个圆是很简便的。css

下面贴出canvas实现圆环的代码，有须要的能够拿去尝试，由于今天主要是讲css3的方法，canvas我就很少解释了html

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
    <canvas id="canvas" width="200" height="200"></canvas>  
    <script>  
            var canvas = document.getElementById('canvas');  
            var process = 0;  
            var context = canvas.getContext('2d');  
  
            // 画外圆  
            context.beginPath();  
            context.arc(100, 100, 80, 0, Math.PI*2);  
            context.closePath();  
            context.fillStyle = '#666';  
            context.fill();  
  			drawCricle(context, process);
            
            function drawCricle(ctx, percent){  
                // 进度环  
                ctx.beginPath();  
                ctx.moveTo(100, 100);    
                ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 ));  
                ctx.closePath();  
                ctx.fillStyle = 'red';  
                ctx.fill();  
  
                // 内圆
                ctx.beginPath();  
                ctx.arc(100, 100, 75, 0, Math.PI * 2);  
                ctx.closePath();  
                ctx.fillStyle = 'white';  
                ctx.fill();  
  
                // 填充文字  
                ctx.font= "bold 30px microsoft yahei";   
                ctx.fillStyle = "black";  
                ctx.textAlign = "center";    
                ctx.textBaseline = 'middle';    
                ctx.moveTo(100, 100);    
                ctx.fillText(process + '%', 100, 100);  
            }  
   
    </script>  
</body>  
</html>

后来之因此是由于没有去使用canvas去实现是由于产品和我说这个任务之后会很是多，我问会不会超过99个？他说有可能，你上限设999吧。jquery

要是999个canvas的圆环去渲染。。。上百个都够呛了吧，无奈之下只好去选用css3，至少这样会快不少。可是css貌似没有直接画个进度环的方法吧。css3

我稍后会贴出完整的代码，这里先讲述一下大概的结构。canvas

要实现进度条的样式用css的话咱们能想到的方法好像只有用大小不一样的圆去叠加，若是是要那种动画不停旋转的loading效果那太简单了，我会很开心的，惋惜。。学习

首先咱们要来个背景圆，好比这样动画

接着来个内圆去遮罩spa

有点像样子了，那咱们接下来就是重点了，如何让它跟着百分好比动态显示改变。js是必须的，我先讲样式3d

下一步咱们要建立两个半圆好比这样orm

css实现半圆的方法有不少，你们能够自行百度，我是采用clip:rect();这个方法去裁剪成半圆的，作完这些咱们就只须要用js去控制左右两边的半圆rotate()的旋转角度就行了。

记得最后把左右两个半圆的颜色统一一下就能够了，下面我会贴出源代码，你们引入一个jq就能够直接用了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.circle {
				width: 200px;
				height: 200px;
				position: relative;
				border-radius: 50%;
				background: red;
			}
				
			.clip_left,.clip_right{
				width:200px;
				height:200px;
				position: absolute;
				top: 0px;left: 0px;
			}
			.circle_left, .circle_right{
				width:200px;
				height:200px;
				position: absolute;
				border-radius: 50%;
				top: 0px;left: 0px;
				background: green;
			}
			/*出于展现用的改变背景色*/
			/*.circle_left{
				background: green;
			}
			.circle_right{
				background: lightblue;
			}*/
			.circle_right,.clip_right {
				clip:rect(0,auto,auto,100px);
			}
			.circle_left , .clip_left{
				clip:rect(0,100px,auto,0);
			}
				
			/*
			*当top和left取值为auto时，至关于0
			*当bottom和right取值为auto时，至关于100%
			*/
			.mask {
				width: 150px;
				height: 150px;
				border-radius: 50%;
				left: 25px;
				top: 25px;
				background: #FFF;
				position: absolute;
				text-align: center;
				line-height: 150px;
				font-size: 16px;
			}

		</style>
	</head>
	<body>
		<!--背景圆-->
		<div class="circle">
			<!--左半边圆-->
			<div class="circle_left">
				<div class="clip_left">
					
				</div>
			</div>
			<!--右半边圆-->
			<div class="circle_right">
				<div class="clip_right"></div>
			</div>
			<div class="mask">
				<span>10</span>%
			</div>
		</div>
		<script src="../jquery-2.2.3.min.js"></script>
		<script>
			$(function(){
				if( $('.mask span').text() <= 50 ){
					$('.circle_right').css('transform','rotate('+($('.mask span').text()*3.6)+'deg)');
				}else{
					$('.circle_right').css({
						'transform':'rotate(0deg)',
						"background":"red"
					});
					$('.circle_left').css('transform','rotate('+(($('.mask span').text()-50)*3.6)+'deg)');
				}
			})
		</script>
	</body>
</html>

随笔很潦草，有什么不足的地方还请你们多多交流学习。　　

邮箱：506117150@qq.com