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

下面贴出canvas实现圆环的代码，有需要的可以拿去尝试，因为今天主要是讲css3的方法，canvas我就不多解释了

<!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吧。

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

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

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

首先我们要来个背景圆，比如这样

接着来个内圆去遮罩

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

下一步我们要创建两个半圆比如这样

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

浅谈一下关于使用css3来制作圆环进度条的更多相关文章

  1. css3 制作圆环进度条

    引子 移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给 ...

  2. 两种CSS3圆环进度条详解

    晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...

  3. CSS3实现圆环进度条

    摘要:圆环进度条被应用于各个场景,比如我们可以用来表示加载进度等.通常我们可以用 css3 的动画去实现. 详解 css3 实现圆环进度条 简单的画一个圆环,我们都知道如何使用 css 画一个圆环.( ...

  4. 浅谈SRT和NDI®在广电制作领域的技术优势和应用

    随着技术的不断发展,用户对音视频质量的要求不断提升,对视频内容观看的方式也日趋多元化.摄像设备的分辨率从高清到4K,甚至有些厂家推出了6K或8K的产品:用户不再局限于从有线电视的直播节目中收看内容,智 ...

  5. 移动端纯CSS3制作圆形进度条所遇到的问题

    近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...

  6. CSS3制作同心圆进度条

    1.css代码 此处在制作进度条时,是旋转进度条的半圆(红色),背景使用灰白(如果使用红色作为背景,旋转灰白遮罩,在浏览器中可能会有渲染bug) .wrapper{ display:block;pos ...

  7. CSS制作环形进度条

    参考来源 <Radial progress indicator using CSS>,该文核心是用纯CSS来做一个环形的进度条.纯css的意思就是连百分比这种数字,都是css生成的.文章作 ...

  8. iOS 开发技巧-制作环形进度条

    有几篇博客写到了怎么实现环形进度条,大多是使用Core Graph来实现,实现比较麻烦且效率略低,只是一个小小的进度条而已,我们当然是用最简单而且效率高的方式来实现. 先看一下这篇博客,博客地址:ht ...

  9. 基于css3的环形动态进度条（原创）

    基于css3实现的环形动态加载条,也用到了jquery.当时的想法是通过两个半圆的转动,来实现相应的效果,其实用css3的animation也可以实现这种效果.之所以用jquery是因为通过jquer ...

随机推荐

  1. MongoDB安装及入门

    下载 windows下的是3.2的版本 https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/ mongodb采用27 ...

  2. 点餐系统3个sprint的团队贡献分

    第一次冲刺贡献分   团员名字 贡献分 麦锦俊 18分 冯婉莹 21分 李康梅 19分 张鑫相 20分 曹嘉琪 22分     第二次冲刺贡献分   团员名字 贡献分 麦锦俊 19分 冯婉莹 20分 ...

  3. cookie和session简单的用法

    一.登录成功则设置cookie和session 二.在登录页判断是否已记住密码 三.在首页判断,和创建会话区 四.在首页执行并显示

  4. Android tween 动画 XML 梳理

    前言: Tween动画是展现出旋转.渐变.移动.缩放的这么一种转换过程,即补间动画.Tween动画有两种定义方式:XML形式,编码形式.这次主要来梳理XML的方式配置动画 (1)XML定义动画,按照动 ...

  5. (一)Nand FLASH 原理讲解

    NAND FLASH  优势 : 可以用当硬盘   这里好像型号是 K9F2G08 基本结构: 不是很难自己看看,暂时不要看

  6. Docker的容器创建以及基本命令

    1. 使用docker run创建docker容器,(docker命令都是以docker开头的)安装完docker后,大多数情况下,本机上面一般没有docker镜像的,执行docker run的时候一 ...

  7. 当display=none时，元素和子元素高度为0的解决办法

    在前端中为了某种需要,我们需要获取display=none的元素或者子元素的实际高度来进行某些处理,然而html对display=none的元素和子元素是不进行渲染的,如果我们没有规定这些元素的高度那 ...

  8. Web 播放声音 — AMR(Audio) 篇

    本文主要介绍 AMR(Aduio) 播放 AMR 格式 Base64码 音频. 1.必备资料 github AMR 开源库 :https://github.com/jpemartins/amr.js用 ...

  9. ASP.NET 前后台调用方法

    Asp.Net中几种相似的标记符号: <%=...%>< %#...%>< %%>< %@ %>解释及用法 答: < %#... %>:是在 ...

  10. font-family:“微软雅黑” OR font-family:Microsoft Yahei

    sublime对中文编码支持的不好,可以考虑用后者.