<!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. activemq修改端口

    1.修改TCP 61616端口 cd /apps/svr/activemq/conf cat activemq.xml |grep transportConnector <transportCo ...

  2. maven的两种打包插件 ，防止 将无用文件打入META_INF,找不到主类的问题

    第三种 打依赖包 将依赖其他jar的包都打进去 <plugin> <artifactId>maven-assembly-plugin</artifactId> &l ...

  3. django进阶开发(一)--session

    基于cookie做用户验证时:敏感信息不适合放在cookie中 session依赖cookie session原理 cookie是保存在用户浏览器端的键值对 session是保存在服务器端的键值对 s ...

  4. python 基于numpy的线性代数运算

    import numpy as np A = [[1,2],[2,1]] np.linalg.inv(A)  #计算矩阵A的逆矩阵. #显示结果 [[-0.33333333 0.66666667] [ ...

  5. jquery判断点击事件是否指定区域

    $(document).click(function(e){  e = window.event || e; // 兼容IE7 obj = $(e.srcElement || e.target);   ...

  6. 不小心跳进安装Django-redis的坑

    为了写缓存这一块,我用pip install django-redis安装Django-redis. 它也把我的Django更新到最新了,我回头看下面的截图才发现的,把我的Django从1.8.2更新 ...

  7. JS(JavaScript）的初了解6（更新中···）

    Js数据类型具体分析 基础类型:  string  number   boolean   null  undefined 引用类型:  object ==>  json  array  等 复习 ...

  8. Java 问题定位工具 -- jps

    概览 最近老大布置的任务就是质量加固,偶然看到了一些对于 Java 性能分析的介绍,因此,有了此篇学习笔记. JDK本身提供了很多方便的JVM性能调优监控工具,除了集成式的VisualVM和jCons ...

  9. C# Winform 中DataGridView 实现单元格输入下拉框功能

    https://blog.csdn.net/ad13adsa/article/details/82108969 private void dataGridViewX1_EditingControlSh ...

  10. MpVue 致力打造H5与小程序的代码共用

    MpVue是什么 基于 Vue.js 的小程序开发框架 从底层支持 Vue.js 语法和构建工具体系. 使用vue开发小程序 修改了 Vue.js 的 runtime 和 compiler 实现,使其 ...