最近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. 今年暑假不AC

    "今年暑假不AC?""是的.""那你干什么呢?""看世界杯呀,笨蛋!""@#$%^&*%...&quo ...

  2. Infinite V2 Release Note

    游戏地址 PLAY 玩法说明 - WASD 控制角色移动 - 按下J键 进入攻击模式(WASD 可以继续移动) 更新内容 - 完成角色锁定目标后边移动边攻击 开发心得 状态机的设计 最初的设计很乱, ...

  3. CentOS 6.2 SVN搭建 (YUM安装)

    安装说明 安装了一下SVN服务器,本文没有与Apache整合,过程如下: 系统环境:CentOS-6.2安装方式:yum install (源码安装容易产生版本兼容的问题)安装软件:系统自动下载SVN ...

  4. 此操作失败的原因是对 IID 为“{000208DA-0000-0000-C000-000000000046}”的接口的 COM 组件调用 QueryInterface

    有些电脑报错,有些电脑正常. 环境:VS2010 WinForm程序, Office2007 C#操作Excel时报错.错误: 无法将类型为“System.__ComObject”的 COM 对象强制 ...

  5. Qt qml treeview 树控件

    qml并没有提供树控件,只能自己写了.model仍然用ListModel对象,弄成层级的就行.delegate必须用loader动态的增加子控件,如此而已. [先看效果] [下载] http://do ...

  6. quick-cocos2d-x :加入精灵背景

    最近几天都在学习 quick  找例子学习. 一直也没什么好的. 并且 还不会 lua .学习学习 突突突 官方文档上的打地鼠 都没了. 不知道为什么链接不好使. 好吧 那么今天就先做一个简单的 例子 ...

  7. Windows7下的免费虚拟机（微软官方虚拟机）

    前言: 不是说windows7自带的虚拟机最好用,而是他是正式版的,免费的,只要你是windows7用户,就可以免费使用: 其实我最推荐的还是Vmware: 微软为什么提供免费的虚拟机呢? 因为vis ...

  8. Dokuwiki布署小记

    最近个人写作风格全面转向Markdown模式,但之前使用的Mediawiki并未原生支持,且本人在布署时为了实现其所见即所得的方案和别的一些个性化需求,添加了太多插件和自定义设置,两年多过去了,很多设 ...

  9. int型、long型和long long型

    long long本质上还是整型,只不过是一种超长的整型.int型:32位整型,取值范围为-2^31 ~ (2^31 - 1) . long:在32位系统是32位整型,取值范围为-2^31 ~ (2^ ...

  10. filter(滤镜) 属性 内部资料 请勿转载 谢谢合作

    Filter 描述 none 默认值,没有效果. blur(px) 给图像设置高斯模糊."radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊 ...