Анимация отсчёта SVG - пример html js css



Книга Анимация отсчёта SVG

Анимация отсчёта SVG (HTML код)


<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <text id="portValueNum" font-size="80" x="100" y="120" text-anchor="middle">
    <tspan id="manage">0</tspan>
  </text>
</svg>

Анимация отсчёта SVG (CSS код)



body {
  font-family: "Source Sans Pro", sans-serif;
  padding: 0;
  margin: 0;
  overflow: hidden;
  min-height: 100vh;
  background: #262626;
  display: flex;
  justify-content: center;
  align-items: center;
}

text {
  fill:#42a6e0;
  font-weight: bold
}


Анимация отсчёта SVG (JS код)



const target = document.querySelector("#manage");
const count = 100;
const dur = 3;

const tween = gsap.
to({}, { duration: count, onUpdate: changeNumber }).
timeScale(count / dur);

function changeNumber() {
  target.textContent = tween.time().toFixed();
}
//# sourceURL=pen.js
    

Анимация отсчёта SVG (Результат кода)

37   0  
    Ничего не найдено.

Добавить ответ:
Отменить.