<!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. Ajax七层模型用途

    Ajax七层模型 OSI七层模型满足所有网格模型 1.物理层:符合标准: 2.数据链路层:如网卡.水晶头.连接网络层等: 3.网络层:路由器(数据外围打IP地址): 4.传输层:两台计算器端口的连接: ...

  2. WPF样式和资源2

    <Window.Resources> <FontFamily x:key="ButtonFontFamily">Time New Roman</Fon ...

  3. Oracle ACL (Access Control List)详解

    在Oracle11g中,Oracle在安全方面有了很多的改进,而在网络权限控制方面,也有一个新的概念提出来,叫做ACL(Access Control List), 这是一种细粒度的权限控制.在ACL之 ...

  4. KindleRSS推送服务器搭建

    参考http://xcode.so/2010/12/google-gae-rss-to-kindle/这篇文章 1.首先尝试在本机搭建服务器直接推送到kindle 需要使用到kindlereader这 ...

  5. 教训 Mac下装windows系统 失败后 磁盘空间丢失

    本来Mac上装的是win10 最近老提示快过期了 想到月底就要停止免费更新了 决定装一下win8 然后升级到win10 因为之前有过装win10的经验 所以很轻松 进入Mac 先到bootcamp 取 ...

  6. Mysql启动失败 MYSQL:The server quit without updating PID file

    MySQL5.6启动时出错 提示MYSQL:The server quit without updating PID file 首先执行 /bin/mysqld_safe --user=mysql & ...

  7. jQuery Lazy Load 图片延迟加载

    基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 版本: jQuery v1.4.4+ jQuery ...

  8. Lua 学习笔记(二)

    七.再论lua函数 1.lua中的函数被认为是带有词法定界和第一类值    a.词法定界:被嵌套的函数可以访问外部函数的变量    b.第一类值: lua中的函数可以放在变量中    (函数指针?) ...

  9. 类和对象：继承 - 零基础入门学习Python038

    类和对象:继承 让编程改变世界 Change the world by program 上节课的课后作业不知道大家完成的怎样?我们试图模拟一个场景,里边有一只乌龟和十条鱼,乌龟通过吃鱼来补充体力,当乌 ...

  10. Spark学习笔记-使用Spark History Server

    在运行Spark应用程序的时候,driver会提供一个webUI给出应用程序的运行信息,但是该webUI随着应用程序的完成而关闭端口,也就是 说,Spark应用程序运行完后,将无法查看应用程序的历史记 ...