利用div制作任意角度圆环，完美兼容
2018-05-23 本文已影响87人
Cola1993a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任意角度圆环</title>
<style type="text/css">
.circleProgress_wrapper{
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.wrapper{
width: 100px;
height: 200px;
position: absolute;
top:0;
overflow: hidden;
}
.right{
right:0;
}
.left{
left:0;
}
.circleProgress{
width: 160px;
height: 160px;
border:20px solid #45B7FF;
border-radius: 50%;
position: absolute;
top:0;
-webkit-transform: rotate(45deg);
}
.rightcircle{
border-top:20px solid #45B7FF;
border-right:20px solid #45B7FF;
right:0;
}
.leftcircle{
border-bottom:20px solid #DAF1FF;
border-left:20px solid #DAF1FF;
left:0;
}
</style>
</head>
<body>
<div class="circleProgress_wrapper">
<div class="wrapper right">
<div class="circleProgress rightcircle" id="rightcircle"> </div>
</div>
<div class="wrapper left">
<div class="circleProgress leftcircle" id="leftcircle"></div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
var bg2 = document.getElementById('rightcircle');
var bg1 = document.getElementById('leftcircle');
var val = 75;
val = Math.max(0,val);
val = Math.min(100,val);
if (val < 51){
var deg2 = Number(45 + Number(180 * val * 2 / 100));
bg2.style.cssText = "transform:rotate(" + deg2 + "deg);-webkit-transform:rotate(" + deg2 + "deg);border-color:#DAF1FF #DAF1FF #45B7FF #45B7FF;"
bg1.style.cssText = "transform:rotate(45deg);-webkit-transform:rotate(45deg);"
}else{
var deg1 = Number(45 + Number(180 * (val - 50) * 2 / 100));
bg1.style.cssText = "transform:rotate(" + deg1 + "deg);-webkit-transform:rotate(" + deg1 + "deg);"
bg2.style.cssText = "transform:rotate(0deg);-webkit-transform:rotate(0deg);border-color:#45B7FF #45B7FF #45B7FF transparent;"
}
}
</script>
</html>
