css圆环百分比
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
} .yuanhaun {
width: 200px;
height: 200px;
margin: 0 auto;
box-sizing: border-box;
position: relative;
border: 1px solid red;
position: relative;
border-radius: 50%;
} .huan1 {
background: red;
position: absolute;
left: 0px;
top: 0px;
border-radius: 50%;
clip: rect(0px 200px 200px 100px);
width: 100%;
height: 100%;
z-index: 10;
} .huan1mask {
background: green;
position: absolute;
left: 0px;
top: 0px;
border-radius: 50%;
clip: rect(0px 200px 200px 100px);
width: 100%;
height: 100%;
z-index: 100;
} .huan2 {
background: red;
position: absolute;
left: 0px;
top: 0px;
border-radius: 50%;
clip: rect(0px 100px 200px 0px);
width: 100%;
height: 100%;
z-index: 10;
} .huan2mask {
background: green;
position: absolute;
left: 0px;
top: 0px;
border-radius: 50%;
clip: rect(0px 100px 200px 0px);
width: 100%;
height: 100%;
z-index: 100;
} .text {
width: 160px;
height: 160px;
position: absolute;
top: 20px;
left: 20px;
background: yellow;
border-radius: 50%;
line-height: 160px;
text-align: center;
z-index: 200;
}
</style>
<script src="js/yuanhuan.js"></script>
<script type="text/javascript">
$(function() {
/*var du = parseInt($(".text").text());
if(du > 360) {
du = du % 360;
}
if(du % 360 == 0) {
$(".huan2mask,.huan1mask").hide();
} else if(du >= 180 && du < 360) {
$(".huan1mask").hide();
$(".huan1").css('z-index', "200");
$(".huan2mask").css("transform", 'rotate(' + (du - 180) + 'deg)');
} else if(du > 0 && du < 180) {
$(".huan1mask").css("transform", 'rotate(' + du + 'deg)');
}*/
$("#yuanhuan").yuanhuan();
})
</script>
</head> <body>
<div id="yuanhuan" class="yuanhaun">
<!--<div class="huan1"></div>
<div class="huan1mask"></div>
<div class="huan2"></div>
<div class="huan2mask"></div>
<p class="text">480</p>-->
</div>
</body> </html>
插件：
;
(function($) {
$.fn.yuanhuan = function(opt) {
var local_opt = {
width: "200px",
height: "200px",
autoplus: false,
time: 3,
du: "260度",
fun: function() {
console.log("is ok");
}
} var obj = $.extend({}, local_opt, opt);
var du = parseInt(obj.du);
var timer = parseInt(obj.time / du);
var html = '<div class="huan1"></div><div class="huan1mask"></div><div class="huan2"></div><div class="huan2mask"></div><p class="text"></p>';
$(this).html(html); var deg = 0;
var stln = setInterval(function() {
if(deg < du) {
aa(++deg);
} else {
clearInterval(stln);
obj.fun();
}
}, timer); function aa(du) {
if(du % 360 == 0) {
$(".huan2mask,.huan1mask").hide();
} else if(du >= 180 && du < 360) {
$(".huan1mask").hide();
$(".huan1").css('z-index', "200");
$(".huan2mask").css("transform", 'rotate(' + (du - 180) + 'deg)');
$('.text').text(du);
} else if(du >= 0 && du < 180) {
$(".huan1mask").css("transform", 'rotate(' + du + 'deg)');
$('.text').text(du);
}
}
} })($ || jQuery || Zepto)
参考：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap,.circle,.percent{
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.wrap{
top:50px;
left:50px;
background-color: #ccc;
}
.circle{
box-sizing: border-box;
border:20px solid #ccc;
clip:rect(0,200px,200px,100px);
}
.clip-auto{
clip:rect(auto, auto, auto, auto);
}
.percent{
box-sizing: border-box;
top:-20px;
left:-20px;
}
.left{
transition:transform ease;
border:20px solid blue;
clip: rect(0,100px,200px,0);
}
.right{
border:20px solid blue;
clip: rect(0,200px,200px,100px);
}
.wth0{
width:0;
}
.num{
position: absolute;
box-sizing: border-box;
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
font-size: 40px;
left: 20px;
top: 20px;
border-radius: 50%;
background-color: #fff;
z-index: 1;
}
</style>
<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
</head>
<body>
<div class="wrap">
<div class="circle">
<div class="percent left"></div>
<div class="percent right wth0"></div>
</div>
<div class="num"><span>0</span>%</div>
</div>
</body>
<script>
var percent=0;
var loading=setInterval(function(){
if(percent>100){
percent=0;
$('.circle').removeClass('clip-auto');
$('.right').addClass('wth0');
}else if(percent>50){
$('.circle').addClass('clip-auto');
$('.right').removeClass('wth0');
}
$('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");
$('.num>span').text(percent);
percent++;
},200);
</script>
</html>
<!doctype html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>百分比</title>
<style type="text/css">
.yuan {
width: 200px;
height: 200px;
margin: 0 auto;
box-sizing: border-box;
padding-top: 20px;
text-align: center;
background-color: #f1f1f1;
border-radius: 50%;
position: relative;
} .yuan_bl1,
.yuan_bl2,
.yuan_bl3,
.yuan_bl4 {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
} .yuan_bl1,
.yuan_bl2 {
background-color: #FF7F4C;
-webkit-box-shadow: 0 0 1px 1px #fff inset;
box-shadow: 0 0 1px 1px #fff inset;
} .yuan_bl3,
.yuan_bl4 {
background-color: #f1f1f1;
} .yuan_bl1,
.yuan_bl3 {
clip: rect(0 200px 100px 0);
} .yuan_bl2,
.yuan_bl4 {
clip: rect(100px 200px 200px 0);
} .yuan_text {
width: 160px;
height: 160px;
line-height: 160px;
box-sizing: border-box;
padding-left: 10px;
margin: 0 auto;
color: #FF7F4C;
font-size: 36px;
font-family: "PingFangSC-Thin", "sans-serif", "STHeitiSC-Light", "微软雅黑", "Microsoft YaHei";
background-color: #fff;
border-radius: 50%;
position: relative;
}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
</head> <body>
<div class="yuan">
<div class="yuan_bl1"></div>
<div class="yuan_text">36°</div>
</div>
<script>
$(function() {
//初始化
var bl = parseInt($('.yuan_text').html());
var rotatenum = bl;
if(bl > 180) {
var blhtml = '';
rotatenum = bl - 180;
blhtml += '<div class="yuan_bl2">';
blhtml += '<div class="yuan_bl4" style="-webkit-transform:rotate(' + rotatenum + 'deg);transform:rotate(' + rotatenum + 'deg);"></div>';
blhtml += '</div>';
//$('.yuan_bl1').remove($('.yuan_bl3'));
$('.yuan_bl1').after(blhtml);
} else {
var blhtml = '';
blhtml += '<div class="yuan_bl3" style="-webkit-transform:rotate(' + rotatenum + 'deg);transform:rotate(' + rotatenum + 'deg);"></div>';
$('.yuan_bl1').append(blhtml);
}
})
</script>
</body> </html>
css圆环百分比的更多相关文章
- CSS圆环百分比DEMO
<html> <head> <title>test</title><!--本DEMO参考http://www.cnblogs.com/jr1993 ...
- css3圆环百分比，菜单栏定位导航
前段时间,社区个人中心改版,看了下设计图,当时隐约感觉到有两个地方(圆环百分比,菜单栏定位导航)比较麻烦.设计图大致如下: 首先看圆环百分比,网上的做法大致分两种,一种是用了CSS3中的transfo ...
- 图片框住一个小视频 谈css padding百分比自适应
今天市场提出活动页,活动页有一块内容是在一个手机背景图框里播放视频,网页是适配的,设计师只给我一张带有手机壳的背景图. 如果用JS画应该也是可以的,但一个简单的活动页没必要,快速实现用背景图调CSS最 ...
- css画百分比圆环
html: <div class="circle"> <div class="percent-circle percent-circle-left&qu ...
- 用css动态实现圆环百分比分配——初探css3动画
最近的小程序项目有个设计图要求做一个圆环,两种颜色分配,分别代表可用金额和冻结金额.要是就直接这么显示,感觉好像挺没水平??于是我决定做个动态! 在mdn把新特性gradients(渐变).trans ...
- HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...
- vue实用组件——圆环百分比进度条
因为所在公司临近年底突然宣布Game Over,导致我等小码农又要踏上一个艰辛的求职道路了.才眨眼功夫,年就过完了,快乐的时光总是很匆忙呀. 开年的第一个面试,面试官问我会不会自己写一个圆环进图圈,这 ...
- css border-raidus 百分比和数值设置效果不同
1.水平方向和竖直方向半径相等:设置数值和百分比的效果是一样的: 2.水平方向和竖直方向半径不相同:则效果不一致,具体参见:http://www.zhangxinxu.com/wordpress/20 ...
- HTML5 移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Xcode 字体 设置-- Xcode family没有显示的字体
前往文件夹 -> /Users/user/Library/Developer/Xcode/UserData/FontAndColorThemes/ (user改为自己的用户名) -----如果 ...
- 2015年可用的TRACKER服务器大全
udp://tracker.openbittorrent.com:80/announceudp://tracker.publicbt.com:80/announcehttp://pubt.net:27 ...
- 常用UML模型简要小结
关系: 关联(组合,生命周期相同:聚合,物以类聚),依赖,泛化(继承),实现 还有 包含,细化复用已有用例:扩展,非必要主要的用例 图: 1.用例图:就是描述一个功能场景(集合),其实用例编写(前后置 ...
- Odoo启动过程
[本文基于odoo9源码编写] odoo包含的服务有 db object report workflow web[wsgi] Odoo以wsgi 规范提供Web及Web服务db/object/repo ...
- 数字电路-异同步 复位 线与 oc门
1.同步电路和异步电路的区别是什么? 异步电路:主要是组合逻辑电路,用于产生地址译码器.FIFO或RAM的读写控制信号脉冲,但它同时也用在时序电路中,此时它没有统一的时钟,状态变化的时刻是不稳定的,通 ...
- HighChats报表使用C#mvc导出本地图片
最近工作使用了HighCharts,要用到保存成图片功能,但是是内部使用,不允许连接外网,于是就学习了下highcharts生成本地图片. highcharts有一个exporting.js来负责导出 ...
- 递推 N循环问题
Description 我们知道,在编程中,我们时常需要考虑到时间复杂度,特别是对于循环的部分.例如, 如果代码中出现 for(i=1;i<=n;i++) OP ; 那么做了n次OP运算,如 ...
- Oracle 游标使用
今天看到一篇很帮的游标,所以强烈转一下 http://www.cnblogs.com/sc-xx/archive/2011/12/03/2275084.html -- 声明游标:CURSOR curs ...
- Ubuntu下修改hosts文件
Ubuntu系统的Hosts只需修改/etc/hosts文件,修改完之后要重启网络.具体过程如下:1.修改hostssudo gedit /etc/hosts2.添加解析记录( . )或者从githu ...
- Keepalived安装配置
一. 介绍 keepalived:是一个类似于 layer3, 4 & 7 交换机制的软件,也就是我们平时说的第 3 层.第 4 层和第 7层交换. Keepalived 的作用是检测 we ...