如何使圆的一半边框透明

Question

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

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

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

关于如何实现这一目标的任何想法？

Answer 1

试试这个。

var time = 60;
var initialOffset = '440';
var i = 1
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
var interval = setInterval(function() {
		$('h2').text(i);
		if (i == time) {  	
clearInterval(interval);
			return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;  
}, 1000);

.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
transition: all 1s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
<h2>0</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#78cef1" fill="none"/>
</g>
</svg>
</div>

Answer 2

当时间低于 30 秒时，将右边框颜色和下边框颜色设置为透明。此外，您必须旋转对象 -45deg，因此您将拥有它向右和向左的一半。

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