<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ellipsis</title>

    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

    <style type="text/css">

    .circle{width:120px;height:120px;position:relative; margin:19px auto 10px auto;border-radius: 50%;background: #19ce6a;}

    .pie_left, .pie_right {width:120px; height:120px;position: absolute;top: 0;left: 0;}

    .circle-left, .circle-right {width:120px; height:120px;background:#0a4a59;border-radius: 50%;position: absolute;top: 0;left: 0;}

    .pie_right, .circle-right {clip:rect(0,auto,auto,60px);}

    .pie_left, .circle-left {clip:rect(0,60px,auto,0);}

    .mask{width:100px;height:100px;border-radius: 50%;left:10px;top:10px;background: #003444;position: absolute;text-align: center;line-height:100px;font-size: 20px;font-weight: bold;color: #fff;

    }

    .mask span{font-size:20px;}

        </style>

</head>

<body>

    <div class="circle" style="left:0">

         <div class="pie_left">

            <div class="circle-left"></div>

        </div>

        <div class="pie_right">

             <div class="circle-right"></div>

        </div>

        <div class="mask"><span id='fenshu'>44.45</span>%</div>

    </div>    

  <script type="text/javascript">  

          var num = $(".circle").find('span').text() * 3.6;

        if (num<=180) {

            $(".circle").find('.circle-right').css("transform","rotate(" + num + "deg)");

            $(".circle").find('.circle-left').css("transform","rotate(0deg)");

        } else {

            $(".circle").find('.circle-right').css("transform","rotate(180deg)");

            $(".circle").find('.circle-left').css("transform","rotate(" + (num - 180) + "deg)");

        };

 </script>

</body>

</html>

效果图：

总结：学习css3  --clip:rect(top,right,bottom,left);

【css3】画‘百分比圆’的更多相关文章

  1. jquery、css3动态显示百分比圆

    动态显示百分圆 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  2. html、css如何画实心圆

    css3画实心圆 实现方法相当简单,css代码如下: .circle{ width:100px; height:100px; border-radius:50px; /* 图形的半径 */ }

  3. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  4. 使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...

  5. 如何使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...

  6. 学习CSS3之实心圆

    CSS3是最新版本的CSS,学习后可以更好的用于工作及自己修改自己代码的各种样式. border-radius圆角方法画实心圆.相当于在长方形(正方形)上画半径为边长一半的圆弧. 效果如上图,代码如下 ...

  7. css3画三角形的原理

    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...

  8. PostScript的简单例子-用粗线画一个圆

    一 近期需要用到PostScript,查询资料学习PS的语法 简单的画一个圆的例子 %!PS-Adobe-3.0 /inch{72 mul} def 4.25 inch 5.5 inch 1.5 in ...

  9. 纯CSS3画出小黄人并实现动画效果

    前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...

随机推荐

  1. 软件测试实验二----selenium、katalon、junit

    1.安装firefox和seleniumIDE.katalon 安装按成后在Firefox中有seleniumIDE.katalon的图标 2.使用katalon导出测试脚本 点击katalon的插件 ...

  2. cent OS 7查询IP

    环境: win7旗舰版 VMware Workstation Pro (虚拟机软件) CentOS-7-x86_64-DVD-1804.iso 安装时选择了默认配置,最小系统安装. 安装好后用  if ...

  3. 【Spring-Controller 整理研究】@RequestMapping略解

    本文以纯后端的角度,去研究Spring Controller在各种情况的行为,及各种属性的作用. 实验准备 利用https://start.spring.io/快速生成一个开箱即用的小巧spring ...

  4. ios开发蓝图

  5. 利用递归解决“汉诺塔的移动”问题（使用python来做的，其它语言也行）

    有a,b,c三个柱子,n个盘子. def move(n, a, b, c): if n == 1: print('move', a, '-->', c) else: move(n-1, a, c ...

  6. composer安装。

    我们这里实在Windows下进行的安装.1.下载Composer安装包.网址:https://getcomposer.org/download/下载Composer-Setup.exe 安装文件.2. ...

  7. 原创《分享（Angular 和 Vue）按需加载的项目实践优化方案》

    针对前端优化的点有很多,例如:图片压缩,雪碧图,js/css/html 文件的压缩合并,  cdn缓存, 减少重定向, 按需加载 等等 最近有心想针对 ionic项目 和 vue项目,做一个比较大的优 ...

  8. Bugku-CTF之成绩单（快来查查成绩吧）

    Day18 成绩单 快来查查成绩吧http://123.206.87.240:8002/chengjidan/ 本题要点:sql手注.查询基础命令 首先查看一下源码  

  9. Spring 学习——Spring AOP——AOP配置篇Advice（无参数传递）

    声明通知Advice 配置方式(以前置通知为例子) 方式一 <aop:config> <aop:aspect id="ikAspectAop" ref=" ...

  10. 【POJ 2176】Folding

    [原题链接]传送门 [题面大意] 一个字符串,可以将它改写成循环节带括号的形式进行压缩,输出压缩长度最小的字符串. [题解思路] 1.没思路没思路,不知道怎么乱搞,大概就可以想到动态规划. 2.套路区 ...