仅使用CSS为车速表针设置动画

Question

我正在尝试为车速表设置动画-从左（绿色）到右（红色）。动画运行后，我也尝试在气压计的末端/红色区域制作针形环。如何仅使用CSS来实现此目的？

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

#speedometer .barometer {
  background-image: url("https://www.turbotobias.dk/wp-content/uploads/2019/03/barometer.svg");
  background-repeat: no-repeat;
  width: 200px;
  height: 200px;
  display: inline-block;
}

#speedometer .needle {
  background-image: url("https://www.turbotobias.dk/wp-content/uploads/2019/03/needle.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>

Answer 1

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

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

#speedometer .barometer {
  background-image: url("https://www.turbotobias.dk/wp-content/uploads/2019/03/barometer.svg");
  background-repeat: no-repeat;
  width: 200px;
  height: 110px;
  display: inline-block;
}

#speedometer .needle {
  background-image: url("https://www.turbotobias.dk/wp-content/uploads/2019/03/needle.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>