怎样在CSS中创建一个圆形边框，其中x%是红色，其余部分是白色，其中x是一个在JavaScript文件中的状态变量？
P粉482108310
2023-07-24 18:47:03
<p>我正在制作一个计时器应用程序，初始时有一个白色的环绕在计时器剩余时间周围。我希望将环绕计时器剩余时间的环逐渐变为红色，当计时器用尽时完全变为红色。</p>
<pre class="brush:php;toolbar:false;"><div className="countdown-timer">
<span>{remainingTime.hours}</span>
<span>:</span>
<span>{remainingTime.minutes}</span>
<span>:</span>
<span>{remainingTime.seconds}</span>
</div></pre>
<pre class="brush:php;toolbar:false;">.countdown-timer {
width: 400px;
height: 400px;
border: 6px solid white;
border-radius: 50%;
box-shadow: black;
font-family: "DM Sans";
font-size: 72px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}</pre>
<p>我尝试了一个以同心圆的方式，但没有得到我想要的效果。</p><p>我想要的效果是：https://i.stack.imgur.com/AVOz3.png</p><p><br /></p>
<div> {remaining.Time.seconds > X.time?( <div className="countdown-timer"> <span>{remainingTime.hours}</span> <span>:</span> <span>{remainingTime.minutes}</span> <span>:</span> <span>{remainingTime.seconds}</span> </div>):( <div className="countdown-timer2"> <span>{remainingTime.hours}</span> <span>:</span> <span>{remainingTime.minutes}</span> <span>:</span> <span>{remainingTime.seconds}</span> </div> ) } </div>---------------------------CSS File----------------------------------------
.countdown-timer { width: 400px; height: 400px; border: 6px solid white; border-radius: 50%; box-shadow: black; font-family: "DM Sans"; font-size: 72px; display: flex; justify-content: center; align-items: center; margin-top: 10px; margin-left: auto; margin-right: auto; } .countdown-timer2 { width: 400px; height: 400px; border: 6px solid white; border-radius: 50%; box-shadow: black; border-color: red; font-family: "DM Sans"; font-size: 72px; display: flex; justify-content: center; align-items: center; margin-top: 10px; margin-left: auto; margin-right: auto; }其中，X.time是一个时间阈值，超过这个时间，环绕的环应该保持白色，而在小于这个时间时，它将变为红色。