一款CSS可视化指针刻度仪表盘,demo里的js代码只是为了辅助。
<div class="gauge">
<div class="ticks">
<div class="tithe" style="--gauge-tithe-tick:1;"></div>
<div class="tithe" style="--gauge-tithe-tick:2;"></div>
<div class="tithe" style="--gauge-tithe-tick:3;"></div>
<div class="tithe" style="--gauge-tithe-tick:4;"></div>
<div class="tithe" style="--gauge-tithe-tick:6;"></div>
<div class="tithe" style="--gauge-tithe-tick:7;"></div>
<div class="tithe" style="--gauge-tithe-tick:8;"></div>
<div class="tithe" style="--gauge-tithe-tick:9;"></div>
<div class="min"></div>
<div class="mid"></div>
<div class="max"></div>
</div>
<div class="tick-circle"></div>
<div class="needle">
<div class="needle-head"></div>
</div>
<div class="labels">
<div class="value-label"></div>
</div>
</div>