【css3】画‘百分比圆’
<!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】画‘百分比圆’的更多相关文章
- jquery、css3动态显示百分比圆
动态显示百分圆 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
- html、css如何画实心圆
css3画实心圆 实现方法相当简单,css代码如下: .circle{ width:100px; height:100px; border-radius:50px; /* 图形的半径 */ }
- css3圆形百分比进度条的实现原理
原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...
- 使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...
- 如何使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...
- 学习CSS3之实心圆
CSS3是最新版本的CSS,学习后可以更好的用于工作及自己修改自己代码的各种样式. border-radius圆角方法画实心圆.相当于在长方形(正方形)上画半径为边长一半的圆弧. 效果如上图,代码如下 ...
- css3画三角形的原理
以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...
- PostScript的简单例子-用粗线画一个圆
一 近期需要用到PostScript,查询资料学习PS的语法 简单的画一个圆的例子 %!PS-Adobe-3.0 /inch{72 mul} def 4.25 inch 5.5 inch 1.5 in ...
- 纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
随机推荐
- Oarcle 之DML
DML:数据操纵语言(Data Manipulation Language, DML)是SQL语言中,负责对数据库对象运行数据访问工作的指令集,以INSERT.UPDATE.DELETE三种指令为核心 ...
- C++ 屏幕录制
http://www.pudn.com/Download/item/id/1584698.html task.renwuyi.com
- Liunx网络技术管理及进程管理
Linux网络技术管理及进程管理(week2_day4) OSI七层模型和TCP/IP四层模型 OSI七层模型:OSI(Open System Interconnection)开放系统互连参考模型 ...
- ltp-ddt git
ltp-ddt目录下有一个文件夹 confrVOaeL confvp5WrA 这个文件夹是由./configure --host=arm-linux-gnueabihf命令生成的. 每次configu ...
- 【题解】Luogu P4381 [IOI2008]Island
原题传送门 题意:求基环树森林的直径(所有基环树直径之和) 首先,我们要对环上所有点的子树求出它们的直径和最大深度.然后,我们只用考虑在环上至少经过一条边的路径.那么,这种路径在环上一定有起始点和终点 ...
- Vue中使用Cropper.js裁剪图片
Cropper.js是一款很好用的图片裁剪工具,可以对图片的尺寸.宽高比进行裁剪,满足诸如裁剪头像上传.商品图片编辑之类的需求. github: https://github.com/fengyuan ...
- 单体 VS 微服务
看图说话 群里发来一张图, 形象TM又生动: 异同之处 借此对比说说单体和微服务的异同之处: 一大坨的时候, 难泄, 具体表现为, 牵一发而动全身, 时而久之, 便秘/肠道不适/影响代谢/肤色变差/身 ...
- Java 诊断工具 Arthas 教程学习笔记
Java 诊断利器 Arthas,是阿里的一款开源工具.Github-alibaba/arthas 上可以看到它的介绍.了解它,主要是最近对分析 Java 错误堆栈比较感兴趣,机缘巧合看到了它. 本文 ...
- C# Winform 中DataGridView 实现单元格输入下拉框功能
https://blog.csdn.net/ad13adsa/article/details/82108969 private void dataGridViewX1_EditingControlSh ...
- html 的 crossorigin 属性
添加这个属性, 并且服务器允许跨域后,会得到精确的报错信息. 添加这个属性,但服务器不允许跨域,就会被同源策略阻止加载资源. 不添加这个属性,只能知道报错,不知道具体信息. https://www.j ...