一款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>
CSS可视化指针刻度仪表盘
正在加载文件目录...
- 0评论
- 0使用
提 交