<!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. windows系统开启虚拟化

    电脑如何开启虚拟进化 当VMware安装系统时,如果电脑没有开启虚拟化,在安装过程中,会发生错误. 查看电脑是否开启虚拟化,[任务管理器] 正常情况如上图,而当虚拟化没有开启的时候,如何解决? int ...

  2. CentOS 7编译OpenWRT

    安装必要的依赖 yum install subversion binutils bzip2 gcc gcc-c++ gawk gettext flex ncurses-devel zlib-devel ...

  3. .NET EF框架的安装、及三种开发模式

    一.EF框架的安装: 要在VS(如Visual Studio 2012)中使用EF框架,就需要先进行安装. 我们需要给这个应用安装EntityFramework包,引入EF框架相关的内容,我们需要引入 ...

  4. UIPresentationController - iOS自定义模态弹出框

    参考: https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/Definin ...

  5. iOS日期问题

    由于项目需要,需要获取去设备的当前时间,组成一个字符串,比如 2018年9月15日 15点30分30秒,需要转换成字符创:180915153030. 很简单的一个需求,于是就使用了日期格式话当前时间: ...

  6. android开发_view和view属性

    一.view视图的宽度和高度属性,属性值:固定和浮动两种状态 1属性为固定值 <View android:layout_width="30dp" android:layout ...

  7. DP一下，马上出发

    简单DP i.May I ask you for a dance(体舞课软广植入) 这题的状态转移方程为:dp[i][j]=max(dp[i-1][j-1]+a[i][j],dp[i][j-1]);( ...

  8. IOS高级开发之多线程（五）NSOperation 2

    接着看NSOperation.NSOperationQueue线程间的通信: 应用场景:比如我们经常把一些耗时的操作比如下载图片放在子线程,那么当这个完成之后,我们就需要回到主线程,这个时候就需要用到 ...

  9. Windows 7环境下网站性能测试小工具 Apache Bench 和 Webbench使用和下载

    1.简要说明: Apache Bench 是Apache的网站性能测试小程序,Windows平台下的程序名简称ab.exe,要想获得这个80k的可执行程序,用户需要下载整个Apache Httpd软件 ...

  10. HADOOP高可用机制

    HADOOP高可用机制 HA运作机制 什么是HA HADOOP如何实现HA HDFS-HA详解 HA集群搭建 目标: 掌握分布式系统中HA机制的思想 掌握HADOOP内置HA的运作机制 掌握HADOO ...