如何自动根据百分比生成圆 css3 js

发布网友发布时间：2022-04-25 07:12

共1个回答

热心网友时间：2022-05-13 10:15

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3百分比</title>
<style>
*{
margin:0;
padding:0;
}
html,
body{
height:100%;
}
.position{
position:relative;
height:100%;
background:antiquewhite;
}
.outer{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
width:200px;
height:200px;
background:aliceblue;
border-radius:50%;
}
.inner{
position:absolute;
z-index:4;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
width:70%;
height:70%;
background:bisque;
border-radius:50%;
}
.deg{
position:absolute;
z-index:3;
top:0;
right:0;
bottom:0;
left:50%;
margin:auto;
width:50%;
height:1px;
color:transparent;
background:red;
transition:transform 0.5s linear;
transform-origin:left center;
transform:rotate(-90deg);
}
</style>
</head>

<body>
<div class="position">
<div class="outer">
<div class="inner"></div>
<div class="deg" id="deg">0.77</div>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
var defDeg = -90;
var degValue = $('#deg').text()*360;
if(degValue){
degValue = degValue+defDeg;
}
else{
degValue = defDeg;
}
$('#deg').css({
"transform":"rotate("+degValue+"deg)"
});
})
</script>
</body>
</html>