怎样在CSS中创建一个圆形边框,其中x%是红色,其余部分是白色,其中x是一个在JavaScript文件中的状态变量?
P粉482108310
P粉482108310 2023-07-24 18:47:03
[CSS3讨论组]
<p>我正在制作一个计时器应用程序,初始时有一个白色的环绕在计时器剩余时间周围。我希望将环绕计时器剩余时间的环逐渐变为红色,当计时器用尽时完全变为红色。</p> <pre class="brush:php;toolbar:false;">&lt;div className="countdown-timer"&gt; &lt;span&gt;{remainingTime.hours}&lt;/span&gt; &lt;span&gt;:&lt;/span&gt; &lt;span&gt;{remainingTime.minutes}&lt;/span&gt; &lt;span&gt;:&lt;/span&gt; &lt;span&gt;{remainingTime.seconds}&lt;/span&gt; &lt;/div&gt;</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>
P粉482108310
P粉482108310

全部回复(1)
P粉111227898
<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是一个时间阈值,超过这个时间,环绕的环应该保持白色,而在小于这个时间时,它将变为红色。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号