<!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. css样式图片、渐变、相关小知识

    一,background-position:(图片定位) 三种写法: 1):按%比,左上角最小(0%,0%),右下角最大(100%,%100): 2):(x,y)左上角最小(0,0),右下角最大(ma ...

  2. js-事件委托

    事件委托一般用于动态生成的元素中使用,如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  3. Asp.Net WebAPI Get提交、Post提交处理

    1.启用跨域提交 <system.webServer> <httpProtocol> <customHeaders> <add name="Acce ...

  4. XAML 名称范围 (x:) 语言特性

    本节介绍为 Windows 运行时实现的 XAML 语言特性的参考信息. 本部分内容 主题 描述 x:Class 属性 配置 XAML 编译,在标记和代码隐藏之间连接分部类.代码分部类在一个独立的代码 ...

  5. Oracle除去换行符的方法

    Oracle除去换行符的方法   很多数据存进数据库后,可能需要将整条数据取出,并用特殊 符号分割,而且整条数据必须是处于一行,如此,如果数据出现 换行的情况,那么读取时就有问题.     这个时候就 ...

  6. ORACLE中使用SQL的正则表达式判断邮箱格式

    在数据库中,有时需要判断字符串是否是一个或者多个邮箱格式,可以使用如下语句判断: ) FROM dual WHERE regexp_like(v_mail,'^\w+((-\w+)|(\.\w+))* ...

  7. Ftp连接错误

    FTP连接上传 文件报错  windows无法访问此文件夹.请确保输入的文件名是否正确,并且您有权访问此文件.. 解决办法 : IE设置为脱机使用,文件浏览器登录ftp时调用IE浏览器,所以无法连接, ...

  8. jQuery链式操作

    讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...

  9. destoon实现调用热门关键字的方法

    本文所述的destoon调用热门关键字的方法是根据数据库里面的保存的搜索的关键字来显示的.每个模块下面都有各自的关键字下面是调用的标签: ? 1 <!--{tag("moduleid= ...

  10. C程序设计语言练习题1-12

    练习1-12 编写一个程序,以每行一个单词的行驶打印其输入. 代码如下: #include <stdio.h> // 包含标准库的信息. int main() // 定义名为main的函数 ...