jquery - 如何添加动画来像微调器一样更改倒计时边框的颜色？

Question

当你到达页面上的这个圆圈时，我想使用 jquery 启动一个计时器。计时器启动后，我希望边框的颜色(白色)绕到外面并变为红色，就像加载微调器一样，我相信我们之前都见过。一旦达到 10 秒，它应该重新开始，并且可能会在悬停时暂停。我对 JQuery 和动画有些陌生，所以我什至不知道从哪里开始。

这是我使用的代码:

<div id="circle-wrapper">
    <div id="circle">
         <h2>Some Text</h2>
    </div>
</div>

#circle-wrapper {
position: absolute;
left: 0;
width: 100%;
margin-top: 80px;
}
#circle {
border-radius: 50%;
border: 5px solid #fff;
max-width: 550px;
height: 550px;
margin: auto;

Answer 1

你不需要 jQuery。有一个名为 css animations

的微调器和其他动画的纯 CSS 解决方案

即

    .loader {
      margin: 6em auto;
      font-size: 10px;
      position: relative;
      text-indent: -9999em;
      border-top: 1.1em solid rgba(255,0,0,0.2);
      border-right: 1.1em solid rgba(255,0,0, 0.2);
      border-bottom: 1.1em solid rgba(255,0,0, 0.2);
      border-left: 1.1em solid #ffffff;
      -webkit-animation: load8 1.1s infinite linear;
      animation: load8 1.1s infinite linear;
    }
    .loader,
    .loader:after {
      border-radius: 50%;
      width: 10em;
      height: 10em;
    }
    @-webkit-keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

<div class="loader"></div>

您可以在此处找到有关动画和关键帧的更多信息:w3school