如何围绕一个角色制作动画答案

【问题标题】：how do I make an animations around one character如何围绕一个角色制作动画
【发布时间】：2022-01-16 12:40:30
【问题描述】：

有没有办法让围绕数字的动画与数字量相对应？就像这张图片中的数字 5：

【问题讨论】：

你可能会让我们 JS 计算百分比，然后使用 CSS 掩码只显示圆圈的一部分

标签： javascript arrays animation css-animations

【解决方案1】：

你的意思是这样的吗？为浅绿色输入大于 5 的数字，为橙色输入小于 5 的数字。

document.getElementById('applyNum').addEventListener('click', function() {
  document.getElementById('numCon').innerHTML = document.getElementById('numInput').value;

  const v = document.getElementById('numCon').innerHTML;
  if (v >= 5) {
    document.getElementById('numCon').style.borderLeft = '2px solid aqua';
    document.getElementById('numCon').style.borderBottom = '2px solid aqua';
  } else if (v < 5) {
    document.getElementById('numCon').style.borderLeft = '2px solid orange';
    document.getElementById('numCon').style.borderBottom = '2px solid orange';
  }
})

#numCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 25%;
  left: 5%;
  width: 50px;
  height: 50px;
  font-size: 5vw;
  border-radius: 50%;
}

<input id='numInput' />
<button id='applyNum'>Apply Number</button>

<div id="numCon"></div>

【讨论】：

好吧，我不是这个意思，但现在这已经足够了。
当我尝试在我的 html 文件中实现它时，它并没有真正起作用，对于 js 来说可能是我的新手。