html部分
<div class="jixulvcontent">
<div class="jixulvmainball">
<span class="jixulvpertext">70%</span>
<div id ="target" class="jixulvzhizhen"></div>
<div>
<ul class="jixulvitemwrap">
</ul>
</div>
</div>
</div>
css部分
.jixulvcontent{
margin-top: 100px;
}
.jixulvmainball {
margin: 70px auto;
/* background: #0AF135; */
width: 150px;
height: 150px;
border-radius: 50%;
line-height: 150px;
text-align: center;
position: relative;
font-size: 80px;
color: #fff;
}
.jixulvpertext{
position:absolute;
top:65%;
left:33%;
z-index: 9;
font-size:40px;
}
.jixulvitemwrap {
padding: 0;
margin: 0;
list-style: none;
position: absolute;
top: -150px;
left: -158px;
border: 235px solid rgba(190, 20, 20, 0);
border-radius: 50%;
transform: rotate(240deg);
z-index: 3;
}
.jixulvitemwrap li {
position: absolute;
top: -100px;
left: -4px;
transform-origin: 4px 100px;
transition: all .3s .5s;
}
.jixulvitem {
width: 10px;
height: 10px;
background: #4e6a4f;
}
.jixulvzhizhen{
position: absolute;
z-index: 9;
left: 6%;
top: 33%;
width: 80px;
height:80px;
/* transform:rotate(100deg); */
/* -ms-transform:rotate(100deg); */
/* -moz-transform:rotate(100deg); */
/* -webkit-transform:rotate(100deg); */
/* -o-transform:rotate(100deg); */
transform-origin : 87% 50% 0;
background:url('img/todo/1.png') no-repeat;
background-size:cover;
}
.jixulvzhizhen img{
width:100%;
height:100%;
}
中间指针部分主要调试指针旋转的圆心位置
transform-origin : X Y 0;
js部分
var current = 0;
var turnRight = function (pers){
current = pers*2.4-30;
// current = (current)%360;
document.getElementById('target').style.transform = 'rotate('+current+'deg)';
}
function render(pers){
turnRight(pers);
var fragment = document.createDocumentFragment();
var itemnum = 72
var deg = 360 / itemnum
var r=58
var g=255
var b=2
var per = pers /100
var text = document.querySelector('.jixulvpertext')
text.innerText=per*100 + '%'
for(var i=0;i<itemnum;i++){
var item = document.createElement('div')
item.className = "jixulvitem"
if(per != 0 && i <= itemnum * per * 2/3 ){
var bgcolor = 'rgb('+ (r+4*i)+','+(g-5*i)+','+b+')'
item.style.background = bgcolor
}
var li = document.createElement('li')
var curdeg = deg * i
if(curdeg<=240){
li.style.transform=`rotate(${curdeg}deg)`
li.appendChild(item)
fragment.appendChild(li)
}
}
var itemwrap = document.querySelector('.jixulvitemwrap')
itemwrap.appendChild(fragment)
}
render(50);