одушевленная стрелка спидометра с использованием только CSS - PullRequest
Новая
       12

одушевленная стрелка спидометра с использованием только CSS

0 голосов
/ 23 марта 2019

Я пытаюсь оживить спидометр - идущий слева (зеленый) вправо (красный).После запуска анимации я также пытаюсь сделать петлю иглы в конце / красной области барометра.Как я могу добиться этого, используя только 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>

1 Ответ

1 голос
/ 23 марта 2019

Вы можете сначала отрегулировать размер игольного элемента и 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>
...