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的解决方案，称为 css动画

即

＆＃13;

    .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);
      }
    }

＆＃13;

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

＆＃13;

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

Answer 2

我希望你对此感到高兴，因为我绝对是。它需要大量的工作，但现在我知道它可以用css完成。我只使用了webkit供应商前缀，所以这可能不适用于任何其他浏览器而不是webkit。

http://jsfiddle.net/TreeTree/sc7aznxo/

HTML

<div class = "cont">
    <div id="circle"></div>
    <div class = "q q1-cover"></div>
    <div class = "q q1"></div>
    <div class = "q q2"></div>
    <div class = "q q3"></div>
    <div class = "q q4"></div>
    <div class = "cutout"></div>
</div>

CSS

* {
    box-sizing:border-box;
}

body {
    margin:0;
}

.cont {
    position:relative;
    width:100px;
    height:100px;
    margin:100px 0 0 100px;
    background:pink;
}

.cutout {
    background:white;
    border-radius:100%;
    width:80px;
    height:80px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
    z-index:100;
}

#circle {
    border-radius: 100%;
    background:red;
    width: 100px;
    height: 100px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}

.q {
    position:absolute;
    width:50%;
    height:50%;
    background:white;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:1;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode:forwards;
}

.q1-cover {
    background:red;
    bottom:50%;
    left:50%;
    border-radius:0 100% 0 0;
    -webkit-animation-name:q1cover;
    -webkit-animation-delay:1s;
}

.q1 {
    border-radius:0 100% 0 0;
    top:0;
    right:0;
    transform-origin:0% 100%;
    -webkit-animation-name:q;
}

.q2 {
    border-radius:0 0 100% 0;
    bottom:0;
    right:0;
    transform-origin:0% 0%;
    -webkit-animation-name:q;
    -webkit-animation-delay:1s;
}

.q3 {
    border-radius:0 0 0 100%;
    bottom:0;
    left:0;
    transform-origin:100% 0%;
    -webkit-animation-name:q;
    -webkit-animation-delay:2s;
}

.q4 {
    border-radius:100% 0 0 0;
    left:0;
    top:0;
    transform-origin:100% 100%;
    -webkit-animation-name:q;
    -webkit-animation-delay:3s;
}

@-webkit-keyframes q1cover {
    0% {  }
    100% { z-index:10; }
}

@-webkit-keyframes q {
    0% { transform:rotate(0deg); }
    99% { opacity:1; }
    100% { transform:rotate(90deg); opacity:0; }
}

如何添加动画来改变倒计时边框的颜色，就像微调器一样？

2 个答案: