最近写了一个基于vue的仪表盘,其中 主要是和 transform 相关的 css 用的比较多。给大家分享一下,喜欢的话点个赞呗?嘿嘿
截图如下:
![](https://jhcan333.github.io/can-Share/image/clock/gaugePreview.png)
实际效果查看地址:https://jhcan333.github.io/can-Share/demos-tips/gaugeDemo.html
github:https://github.com/JHCan333/can-Share/blob/master/demos-tips/gaugeDemo.html。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个基于vue的仪表盘demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
/**仪表盘的css开始**/
/* 仪表盘区域 */
.jhc-gauge-area {
width: 500px;
height: 500px;
position: relative;
background: #050842;
}
/* 仪表盘中圆形的环 */
.jhc-gauge-circle {
width: 88%;
height: 88%;
border: 2px solid #509fef;
border-radius: 50%;
position: absolute;
top: 5%;
left: 6%;
}
/* 仪表盘的圆心 */
.jhc-gauge-center {
width: 8%;
height: 8%;
border-radius: 50%;
position: absolute;
background-color: #509fef;
z-index: 20;
left: 46%;
top: 46%;
box-shadow: 0px 0px 10px 1px #000;
}
/* 仪表盘的背景图片 */
.jhc-gauge-back {
width: 66%;
height: 66%;
border-radius: 50%;
position: absolute;
top: 4%;
left: -33%;
background: url(https://jhcan333.github.io/can-Share/image/clock/gaugeBack.png) no-repeat;
background-size: 95% 95%;
background-position: center center;
}
/* 仪表盘的指针 */
.jhc-gauge-needle {
z-index: 5;
width: 8%;
height: 26%;
position: absolute;
left: 46%;
bottom: 50%;
transition:all 0.5s ease-in-out;
transform-origin: center bottom;
background: url(https://jhcan333.github.io/can-Share/image/clock/hourPoint.png) no-repeat;
background-size: 100% 100%;
}
/* 仪表盘的标题 */
.jhc-gauge-title {
color: #fff;
position: absol