<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin: 0;padding: 0;}

        .box{width:200px;height:200px;margin:10px auto;position:relative;}

        .box div{position:absolute;top:0;left:0;border-radius:50%;height:160px;width:160px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;}

        .box .bg{border:silver 20px solid}

        .box .bg2{border:silver 20px solid;clip:rect(0,100px,200px,0);}

        .box .rount{border:green 20px solid;clip:rect(0,100px,200px,0);-webkit-transform:rotate(0deg);}

        .box .rount2{border:green 20px solid;clip:rect(0,200px,200px,100px);-webkit-transform:rotate(0deg);display:none}

        .box .num{font:bold 24px/160px tahoma;text-align:center;color:green;top:20px;left:20px;z-index:9;}

        .points{width:200px;margin:10px auto;text-align: center;}

    </style>

    <script src="../jquery-1.7.2.js"></script>

    <script>

        $(function(){

            var points = $('#points'),

                    rount = $('#rount'),

                    rount2 = $('#rount2'),

                    num = $('#num');

            points.change(function(){

                var n =points.val();

                num.text(n + '%');

                if(n<=50){

                    rount.css('-webkit-transform','rotate(' + 3.6*n + 'deg)');

                    rount2.css('display','none');

                }else{

                    rount.css('-webkit-transform','rotate(180deg)');

                    rount2.css('display','block');

                    rount2.css('-webkit-transform','rotate(' + 3.6*(n-50) + 'deg)');

                }

            })

        })

    </script>

</head>

<body>

    <div class="box">

        <div class="bg"></div>

        <div id="rount" class="rount"></div>

        <div class="bg2"></div>

        <div id="rount2" class="rount2"></div>

        <div id="num" class="num">0</div>

    </div>

    <div class="points">

        <span>0</span>

        <input type="range" id="points" min="0" max="100" step="1" value="0">

        <span>100</span>

    </div>

</body>

</html>

测试结果：

CSS3绘制环形进度条的更多相关文章

  1. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  2. canvas绘制环形进度条

    <!DOCTYPE html> <html > <head> <meta http-equiv="content-type" conten ...

  3. canvas 绘制环形进度条

    结果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  4. jQuery + CSS3实现环形进度条

    实现原理 原理非常的简单,在这个方案中,最主要使用了CSS3的transform中的rotate和CSS3的clip两个属性.用他们来实现半圆和旋转效果. 半环的实现 先来看其结构. HTML < ...

  5. CSS3实现环形进度条?

    两个对半矩形遮罩, 使用rotate以及overflow: hidden进行旋转

  6. iOS带动画的环形进度条(进度条和数字同步)

    本篇写的是实现环形进度条,并带动画效果,要实现这些,仅能通过自己画一个 方法直接看代码 为了方便多次调用,用继承UIView的方式 .m文件 #import <UIKit/UIKit.h> ...

  7. canvas环形进度条

    <style> canvas { border: 1px solid red; margin: 100px; }</style> <canvas id="rin ...

  8. iOS 环形进度条

    .h文件 #import <UIKit/UIKit.h> @interface YTProgressView : UIView@property (nonatomic, copy) NSS ...

  9. 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

随机推荐

  1. （转）SQL Server 2008将数据导出为脚本 [SQL Server]

    之前我们要将一个表中的数据导出为脚本,那么只有在网上找一个导出数据的Script,然后运行就可以导出数据脚本了.现在在SQL Server 2008的Management Studio中增加了一个新特 ...

  2. Redhat修改本地yum源

    1.将Centos系统的ios文件传到服务器,比如传到/root目录下: 2.将ios文件挂载到本地,需要在本地建立一个文件夹,比如/yum; mkdir /yum mount -o loop /ro ...

  3. bootstrapValidator Maximum call stack size exceeded

    既然validator依赖与Bootstrap3,那么表单必须使用Bootstrap的类来编写. Tip1:如果表单不是通过Bootstrap构建(即元素包含表单项且关联的label没有form-gr ...

  4. 棋盘上的距离 - Grids1657

    棋盘上的距离 问题描述: 写一个程序,给定起始位置和目标位置,计算王.后.车.象从起始位置走到目标位置所需的最少步数. 王:横.直.斜都可以走,但每步限走一格. 后:横.直.斜都可以走,每步格数不受限 ...

  5. 安卓网络请求之——OkHttp学习

    之前做安卓项目的时候,HTTP请求用的是android api中的HttpURLConnection和HttpClient,编码比较繁琐,自己封装的也不好.后来知道有很多网络请求的第三方框架,可以方便 ...

  6. 常用meta标签整理

    < meta > 元素 概要 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 we ...

  7. FileOutputStream

    OutputStream: FileOutputStream BufferedOutputStream 缓冲输出流 package file; import java.io.File; import ...

  8. Debian/Ubuntu 安装bcm43142无线网卡驱动

    Drivers for Broadcom BCM43142 wireless card of Ubuntu/Debian 64-bit Linux 1.Check the wireless card ...

  9. 多线程操作UI界面的示例 - 更新进度条

    http://blog.csdn.net/liang19890820/article/details/52186626

  10. 【Xamarin开发 Android 系列 8】 创建一个Json读取数据应用（上）

    后续将内容贴上来...........