使用css结合vue3css变量绘制仪表盘指针动画效果

本文档详细介绍了如何使用CSS和Vue3实现一个自适应宽高的仪表盘,保持指针的宽高比和旋转动画效果。通过伪元素绘制仪表盘背景和指针,利用vw单位调整大小和位置。同时,通过动态计算指针角度并应用过渡动画,实现了指针角度的平滑变化。在每次更改指针角度后,通过`makeAnimate`方法添加和移除动画效果,确保动画的连贯性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.功能描述

  • 仪表盘与指针自适应宽度,保持宽高比,保持指针位置
  • 保留指针旋转动画效果
  • 根据返回结果计算指针角度

2 效果展示

指针仪表盘

3 实现

3.1 实现仪表盘
  • 使用padding撑开高度,保持宽高比
  • 使用before伪元素绘制仪表盘,锥形渐变实现颜色由浅到深
  • 使用after伪元素覆盖中心位置
  • 指针我使用的字体图标,使用 vw 单位设置大小和位置
<div class="conic-wrap">
  <div class="conic">
     <span class="pointer icon icon-Pointer"></span>
   </div>
 </div>
 <div>
   <el-button @click="testSpeed">Run Speed Test</el-button>
 </div>
/* 添加边距,可忽略 */
.conic-wrap {
  padding: 0 12%;
}
/* 撑开高度 */
.conic {
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
}
/* 绘制仪表盘 */
.conic::before {
  content:"";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  border-radius: 50%;
  transform: rotate(-180deg);
  background: 
        conic-gradient(
          #fff 70deg,
          #e7edf6 70deg,
          #215db6 290deg,
          #fff 290deg,
          #fff 360deg
        );

}
/* 掏空中间 */
.conic::after {
  content:"";
  position: absolute;
  display: block;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background-color: #fff;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
}
/* 指针样式 */
.conic span.pointer {
  position: absolute;
  color: #215db6;
  transform-origin: center 70%;
  z-index: 1;
  left: calc(50% - 2.6vw);
  top: calc(50% - 3.2vw);
  z-index: 1;
  font-size: 5.4vw;
  cursor: auto;
  transform:rotate(v-bind(pointerDeg));/* vue3新增,在css中使用变量 */
  transition: all .5s cubic-bezier(.14,1.24,.96,.77);
}
/* 动画效果 */
.in-animation{
  animation: pointerMove 1.5s ease-in-out;
}
/* -102 到 +102 */
@keyframes pointerMove {
  from{
    transform:rotate(-102deg);
  }
  10% {
    transform:rotate(-104deg);
  }
  to {
    transform:rotate(v-bind(pointerDeg));
  }
}
3.2 保持动画效果
  • 每次更改指针角度后,调用 makeAnimate 方法,为指针重新添加动画效果,当执行结束后再移除
  makeAnimate() {
  // 监听指针是否结束动画,当结束动画后将动画效果移除
   document.querySelector('span.pointer').addEventListener('animationend', function () {
      this.classList.remove('in-animation')
    })
    // 添加动画效果
    document.querySelector('span.pointer').classList.add('in-animation')
  },
3.3 动态更改指针角度
  • vue3 支持在 css 中使用 data 属性
  • 示例 v-bind(data属性名称)
/* 直接在style标签中使用即可 */
.conic span.pointer {
  transform:rotate(v-bind(pointerDeg));
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值