Javascript 如何使圆的一半边界透明

我有一个小游戏，用户有60秒的时间来解决。为了表示剩余的时间，我使用了一个从60开始的数字，然后开始下降1/s，直到达到0。此编号将位于带边框的透明圆形div内：

.circle {
  width: 100px;
  height: 100px;
  border: 3px solid #2F4491;
  border-radius: 100%;
}

我试图使边界与剩余时间成比例地消失：边界将在剩余60秒开始时完全可见，当用户只剩下30秒时，仅左侧可见，依此类推

---

有没有办法做到这一点？

当时间低于30秒时，将边框右颜色和边框底颜色设置为透明。此外，您必须将对象旋转45度，使其一半向右，一半向左

淡出时，请对底部和顶部执行相同的操作。

试试这个

var时间=60； var initialOffset='440'； 变量i=1 /*需要初始运行，因为间隔尚未发生*/ $'.circle_animation'.css'stroke-dashoffset'，initialOffset-1*initialOffset/时间； var interval=setIntervalfunction{ $'h2'.texti； 如果i==时间{ 清晰间隔； 回来 } $'.circle_animation'.css'stroke-dashoffset'，initialOffset-i+1*initialOffset/时间； i++； }, 1000; .项目{ 位置：相对位置； 浮动：左； } .项目h2{ 文本对齐：居中； 位置：绝对位置； 线高：125px； 宽度：100%； } svg{ -webkit变换：旋转-90度； 变换：旋转-90度； } .circle_动画{ 笔划dasharray:440；/*此值是圆的像素周长*/ 行程偏移：440； 过渡：所有1s线性； } 0 第一层

---

你大概是说边界，而不是边际？网络上有很多等待的纺纱机/加载器，我建议从他们那里获得灵感。小例子：有些非常接近你想要实现的目标。是的，我的意思是边界，我的道歉。谢谢大家的提醒@utkanos你是想用CSS还是javascript来做这件事？我在使用javascript@AjayKulkarni时也没有问题