时间戳

首页 > 解决方案 > 仅使用 CSS 动画速度计指针

css - 仅使用 CSS 动画速度计指针

问题描述

我正在尝试为速度计设置动画 - 从左（绿色）到右（红色）。动画运行后，我是否还尝试在气压计的末端/红色区域制作针环。如何仅使用 CSS 来实现这一点？

#speedometer {
  display: inline-block;
  position: relative;
}

#speedometer .barometer {
  background-image: url("https://svgshare.com/i/GAZ.svg");
  background-repeat: no-repeat;
  width: 200px;
  height: 200px;
  display: inline-block;
}

#speedometer .needle {
  background-image: url("https://svgshare.com/i/GBP.svg");
  background-repeat: no-repeat;
  z-index: 999999;
  width: 200px;
  height: 250px;
  display: inline-block;
  left: 0px;
  position: absolute;
  top: 0px;
}
<div id="speedometer">
  <span class="barometer"></span>
  <span class="needle"></span>
</div>

标签： csscss-animations

解决方案

您可以先调整针元素的尺寸，transform-origin然后简单地使用旋转：

#speedometer {
  display: inline-block;
  position: relative;
}

#speedometer .barometer {
  background-image: url("https://svgshare.com/i/GAZ.svg");
  background-repeat: no-repeat;
  width: 200px;
  height: 110px;
  display: inline-block;
}

#speedometer .needle {
  background-image: url("https://svgshare.com/i/GBP.svg");
  background-repeat: no-repeat;
  z-index: 999999;
  width: 200px;
  height: 110px;
  display: inline-block;
  left: 0px;
  position: absolute;
  bottom: 5px;
  animation:
  change 3s linear,
    loop 1s linear 3s infinite alternate;
  transform-origin:50% calc(100% - 8px) ;
}
@keyframes change {
  0% {
    transform:rotate(-90deg);
  }
  50% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(90deg);
  }
}
@keyframes loop {
  0% {
    transform:rotate(90deg);
  }
  100% {
    transform:rotate(70deg);
  }
}
<div id="speedometer">
  <span class="barometer"></span>
  <span class="needle"></span>
</div>

推荐阅读