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>
