x%가 빨간색이고 나머지가 흰색인 CSS에서 원형 테두리를 만드는 방법은 무엇입니까? 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.분}</span>
<span>:</span>
<span>{remainingTime.seconds}</span>
<pre class="brush:php;toolbar:false;">.countdown-timer {
너비: 400px;
높이: 400px;
테두리: 6px 단색 흰색;
테두리 반경: 50%;
상자 그림자: 검정색;
글꼴 모음: "DM Sans";
글꼴 크기: 72px;
디스플레이: 플렉스;
내용 정당화: 센터;
항목 정렬: 중앙;
여백 상단: 10px;
여백 왼쪽: 자동;
여백 오른쪽: 자동;
}</pre>
<p>동심원 접근 방식을 시도했지만 원하는 효과를 얻지 못했습니다. </p><p>내가 원하는 효과는 다음과 같습니다: https://i.stack.imgur.com/AVOz3.png</p><p><br /></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
으아아아
---------CSS 파일--------------- --------------- -----
으아아아X.time은 시간 임계값이며, 이 시간이 지나면 주변 링이 흰색으로 유지되어야 하며, 이 시간 이하에서는 빨간색으로 변합니다.