css3简易制作雷达表，模仿支付宝信誉积分 动态滚动指针：

标签：margin   指针   ntb   模仿   nsf   element   htm   absolute   tom   

html部分：

<div class="mode">
<p class="hu"></p>
<p class="z" id="z"></p>
<p class="center"></p>
</div>

css部分： //可以采用@keyframes结合animation 或者直接js控制c3 动态控制指针
.mode{
height:75px;
width: 120px;
background: #fff;
position: relative;
overflow: hidden;
}
.mode .hu{
position: absolute;
height:100px;
width: 100px;
border:10px solid #eee;
border-radius: 50%;
bottom:-50px;
}
.mode .z{
height:2px;
width: 40px;
background: #ccc;
position: absolute;
border-radius:1px ;
left: 21px;
bottom:0px;
/* animation: move 1s linear infinite alternate; */
transform-origin: 100% 0;
transform: rotateZ(0deg);
transition: transform 1s;
}
.mode .center{
position: absolute;
left: 50%;
bottom:-7px;
height:10px;
width: 10px;
margin-left: -5px;
border-radius:50%;
background:#ccc;
}
/* @keyframes move{
0%{ transform: rotateZ(0deg); }
100%{ transform: rotateZ(180deg); }
} */

js部分：
$(".z").css({‘transform‘:`rotateZ(${70}deg)`}); 或者
document.getElementById(‘z‘).style.transform = `rotateZ(${70}deg)`;

css3简易制作雷达表，模仿支付宝信誉积分 动态滚动指针：

标签：margin   指针   ntb   模仿   nsf   element   htm   absolute   tom   

原文地址：https://www.cnblogs.com/lkkk/p/12373192.html