<!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. （三）《Java编程思想》——构造函数初始化

    1.初始化顺序是由变量在类内的定义顺序决定的,并且先初始化变量,然后才调用构造函数. package chapter4; //: OrderOfInitialization.java /** * 初始 ...

  2. HTML 5 与HTML 4 的区别

    (1)HTML 5 与HTML 4 的相比,语法的改变,以下四个方面: 字符编码改变举例: 省略标记值: (2)新增和废弃的元素 (3)新增html全局属性 (1)指定元素是否可编辑 (2)指定页面是 ...

  3. JobDeer 的《程序员必读的职业规划书》

    JobDeer 的<程序员必读的职业规划书> 关键字 持续性,人生规划,职业规划 概念 职业规划三部分: 职业定位 目标设定 通道设计 职业价值论: 能为公司做什么 同样的能力再不同公司价 ...

  4. 常见Oracle数据库问题总结及解决办法（一）

    开发中常使用Oralce数据库,使用中也许会碰到形形色色的各类错误提示,如:ORA-00933:SQL命令未正确结束.ORA-009242等等,为此记录积累对于自己来说还是很有帮助的,今天就记录以前出 ...

  5. 【转】char *str 和 char str[]的区别

    char str[] = "abcd";定义了一个局部字符数组,返回它的地址肯定是一个已经释放了的空间的地址. 此函数返回的是内部一个局部字符数组str的地址,且函数调用完毕后 此 ...

  6. 同步关键字synchronized

    同步关键字synchronized 同步关键字synchronized使用简洁,代码可维护性好.在JDK6中,性能也比早期的JDK有很大的改进.如果可以满足程序要求,应该首先考虑这种同步方式. 关键字 ...

  7. wordpress禁止调用官方Gravatar头像调用ssl头像链接提升加载速度

    在主题中的functions.php文件末尾加上以下代码即可(外观>编辑>functions.php) //官方Gravatar头像调用ssl头像链接 function get_ssl_a ...

  8. 很强的PHP图片处理类

    /*** 基本图片处理,用于完成图片缩入,水印添加* 当水印图超过目标图片尺寸时,水印图能自动适应目标图片而缩小* 水印图可以设置跟背景的合并度** Copyright(c) 2005 by ustb ...

  9. .NET MVC权限控制

    一.模块 权限控制的主体单位,与MVC里的Cotroller相对应. 二.模块权限 权限控制的最小单位,通过给每一个模块设置权限,可以控制到非常细小的功能. 三.角色 权限拥有者,通过给不同的角色分配 ...

  10. [POJ] 2239 Selecting Courses(二分图最大匹配)

    题目地址:http://poj.org/problem?id=2239 Li Ming大学选课,每天12节课,每周7天,每种同样的课可能有多节分布在不同天的不同节.问Li Ming最多可以选多少节课. ...