<!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. js操作符

    JS操作符 x + y(数字) 将x和y相加; x + y(字符串) 将x和y拼接在一起; x - y 从x中减去y; x * y 将x和y相乘; x / y 将x除以y; x % y x和y的模(既 ...

  2. angularjs中ng-switch的用法

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app" ng-controller="ctr ...

  3. JS 匿名函数

    一.声明: 1. 正常函数声明: //正常函数声明 function foo(p1, p2){ return p1+p2; } 2. 匿名函数声明: //匿名函数声明 var foo= functio ...

  4. java学习笔记（4）：内存管理

    在内存的方面,Java自身带有垃圾运行机制,表面上好像我们可以忽略不计,但是如果我们对其加以理解的话,说不定有时会达到事半功倍的效果. 所以自己花些时间整理一些此类的资料. 一.基本概念 1.栈 对于 ...

  5. 在同个类中non-const插入const来减少重复

    class A { private: std::string a; public: A(std::string b) :a(b){} const char& operator[](int b) ...

  6. Sql Server批量停止作业

    CREATE Proc [dbo].[Proc_StopJob] as begin declare @I int declare @JobID uniqueidentifier -- 1. creat ...

  7. 深度克隆（对象、数组）--------百度IFE前端task2

    var srcObj = { a: 1, b: { b1: ["hello", "hi"], b2: "JavaScript" }}; co ...

  8. Nginx的安装及反向代理设置

    因为项目的缘故,接触到了Nginx的安装和反向代理设置,和大家分享下. 一.Nginx的下载.安装cd /homewget http://nginx.org/download/nginx-1.0.5. ...

  9. drop,delete,truncate

    drop,truncate是ddl,数据库定义语言,不执行事务 delete是dml,数据库操作语言,有事务 drop:删除内容和定义,释放空间 delete:删除内容,不删除定义,不释放空间 tru ...

  10. java实现双向链表

    PS:双向链表(每个节点含有指向前一个节点的前驱与后一个节点的后继) public class DoublyLinkedList { static class Node { private Objec ...