<!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. POI兴趣点搜索 - 地理信息系统（6）

    (2017-08-13 银河统计) POI(Point of Interest),中文可以翻译为"兴趣点",兴趣点(POI)是地理信息系统中的一个术语,泛指一切可以抽象为点的地理对 ...

  2. 关于BDD100k数据输入处理mask变为56*56

    Mask_rcnn数据训练 Mask rcnn往里面送的是数据原图,可能没有把mask送里面,而且mask的数据 56*56,仿照coco——inspect_data重点考虑 Bounding box ...

  3. laravel中ajax,post传值问题

    //laravel中有CSRF保护 不加的话会出现419错误$.ajax({ url: '/admin/user/'+id, type: "POST", data: {'_toke ...

  4. 【模板】快速幂&取余运算

    输入\(b\),\(p\),\(k\)的值,求\(b^p mod k\)的值.其中\(b\),\(p\),\(k^2\)为长整型数. 1.普通做法 \(print\) \(pow(b,p)\)\(mo ...

  5. 高级shell 脚本

    1.函数 函数是一个脚本代码块,你可以为其命名并在代码中任何位置重用.要在脚本中使用该代码块时,只要使用所起的函数名就行了(这个过程称为调用函数).本节将会介绍如何在shell脚本中创建和使用函数 创 ...

  6. [ERROR] --gtid-mode=ON or UPGRADE_STEP_1 or UPGRADE_STEP_2 requires --log-bin and --log-slave-updates

    centos7.5 做基于GTID的主从重启从库报错 问题: [root@db01-51 ~]# tail -50 /application/mysql/data/db01-51.err 2019-0 ...

  7. 【我的前端自学之路】【HTML5】Web Socket

    以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10508118.html 什么是Web Socket WebSocket ...

  8. Kindeditor富文本实现textarea文本域的上传及单独button 按钮绑定(用来实现单文件上传)

    在最近项目要新增一个内容文章,文章包含一般的正文内容,其中正文中可以包含多张图片.文章最多包含一个音频文件.文章正文的上传功能我是通过textarea文本域绑定kindeditor编辑器实现的,而单独 ...

  9. python自动化测试常用断言的使用方法

    自动化测试中寻找元素并进行操作,如果在元素好找的情况下,大家就可以较熟练地编写用例脚本了,但光进行操作可能还不够,有时候也需要对预期结果进行判断. 下面介绍几个常用断言的使用方法,可以一定程度上帮助大 ...

  10. Dva三种方式实现dispatch的Promise回调

    Dva2.0及以上版本 使用官方自带的Promise // 业务组件 e.g: Tags.js dispatch({ type: 'user/add', payload: {}, // 需要传递的信息 ...