用纯 CSS 动画速度计指针答案

【问题标题】：animate speedometer needle with pure css用纯 CSS 动画速度计指针
【发布时间】：2019-06-14 02:00:40
【问题描述】：

我已经尽我所能在这里Jsfiddle。现在我想从左到右慢慢地为中心针点设置动画。我听说过 css 关键帧并尝试过。但是，它会左右移动。我没有得到预期的结果。如何仅使用纯 css 为这根针设置动画？

CSS

#logo
{
    display: inline-block;
    position: relative;
}
#logo .speedometer
{
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 20px solid #000;
    border-right: 20px solid white;
    border-bottom: 20px solid white;
    -webkit-transform: rotate(45deg);
    display: inline-block;
}
#logo .needle
{
    width: 5px;
    height: 50px;
    background: #999999;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    display: inline-block;
    left: 57px;
    position: absolute;
    top: 10px;
}

HTML

<div id="logo">
    <span class="speedometer"></span>
    <span class="needle"></span>
</div>

【问题讨论】：

标签： html css css-animations

【解决方案1】：

演示 - http://jsfiddle.net/99oakz7w/2/

使用@keyframes

@-webkit-keyframes move {
  0% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}

#logo {
  display: inline-block;
  position: relative;
}
#logo .speedometer {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  border: 20px solid #000;
  border-right: 20px solid white;
  border-bottom: 20px solid white;
  -webkit-transform: rotate(45deg);
  display: inline-block;
}
#logo .needle {
  width: 5px;
  height: 50px;
  background: #999999;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  display: inline-block;
  left: 57px;
  position: absolute;
  top: 10px;
  -webkit-animation: move 5s infinite;
  transform: rotate(0deg);
  transform-origin: bottom;
}
@-webkit-keyframes move {
  0% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}

<div id="logo">	<span class="speedometer"></span>
  <span class="needle"></span>

</div>

【讨论】：

【解决方案2】：

为速度计设计仪表板仪表。

DEMO

希望对您有所帮助。

【讨论】：

【解决方案3】：

我几乎可以做到，针会随心所欲地移动，但会远离中心http://jsfiddle.net/99oakz7w/1/

CSS

@-webkit-keyframes move{
0%{transform:rotate(0deg);}
10%{transform:rotate(-45deg);}
20%{transform:rotate(30deg);}
50%{transform:rotate(80deg);}
100%{transform:rotate(90deg);}

}

【讨论】：

【解决方案4】：

Akshay 在 CSS 中的第 28 行之后只需要 transform-origin: bottom;。

【讨论】：