<!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. Java 必须掌握的 20+ 种 Spring 常用注解

    Spring部分 1.声明bean的注解 @Component 组件,没有明确的角色 @Service 在业务逻辑层使用(service层) @Repository 在数据访问层使用(dao层) @C ...

  2. base64使用

    public static void main(String args[]) throws Exception { InputStream in = null; byte[] data = null; ...

  3. vuex store刷新存储状态

    app.vue 平时不想把信息存到session里,只有无可奈何的时候才准备村 <script> export default { name: 'App', created() { //刷 ...

  4. flutter-fluro

    路由传参 route.dart import 'package:fluro/fluro.dart'; //添加页面 import 'package:m/pages/loginPage.dart'; i ...

  5. Tomcat &servlet字符集编码问题

    1.字符编码的原由 1.1 request和response的默认编码是? 如果未指定字符编码,则Servlet规范要求使用ISO-8859-1的编码. HTTP消息正文(请求或响应)的字符编码在Co ...

  6. 2018年-2019年第二学期第三周C#学习个人总结

    在第三周,我们又开始了C#的进一步学习,学习的范围是从4.8static关键字到4.11对象初始化器.在4.8static关键字我学到了静态字段,静态属性,静态方法,静态类,静态构造方法单例模式,嵌套 ...

  7. windows下共享文件夹在Linux下打开

    ①首先在Windows下创建一个准备用来共享用的文件夹 ②在虚拟机下选择第一步创建的文件夹为共享文件夹 ③在虚拟机shell命令框下输入 cd  /mnt/sgfs 回车进入共享文件夹. 备注:其他细 ...

  8. node 之 Buffer 笔记

    1. Buffer 相关 js 最初是被设计来处理 html的,因此它不善于处理二进制数据,只有数值和字符串类型.而 node 是基于 js 的,因为 node 需要实现一些譬如数据库通信.操作图像及 ...

  9. 改变选择文字的color及background-color

    在一些特殊的网站中,常常会有着一些新奇的体验,在阅读网页的时候相信许多人都会和我一样有着一个习惯,把一些文字选中然后进行阅读,或者时要复制粘贴的时候选择文字对吧.然而无论是在ie,chrome,fir ...

  10. JS 自由变量---JS 学习笔记（三） 补充

    自由变量:在 A 中作用域要用到的变量  x,并没有在 A 中声明,要到别的作用域中找到他,这个变量 x 就是自由变量.代码示例如下: var x = 20; function A (b) { ret ...