仅用CSS修改速度表针

<div class="speedometer">
  <div class="hand"></div>
</div>

.speedometer {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ddd;
  border-radius: 50%;
  margin: 50px auto;
}

.hand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 70px;
  background-color: #f00;
  transform-origin: bottom center;
  transform: rotate(0deg);
  transition: transform 1s ease-in-out;
}

/* 修改速度表针的角度 */
.speedometer:hover .hand {
  transform: rotate(180deg);
}