如何制作 Javascript 计时器栏？

Question

我基本上只想知道怎么做：

.timerwrapper {
  height: 60px;
  width: 100%;
  background: #484949;
  position: relative;
  margin: auto;
}

shrinking($item, $duration) {
  $duration = unit($duration, 's');

  {$item} {
    width: 0%;
    height: 60px;   
    position: absolute;
    bottom: 0;    
    animation: fillBar $duration ease-in infinite;
    background-image: linear-gradient(to right, #f00439, #f28d0d);  
  }  

  @keyframes fillBar {
      0% {
        width: 100%;
      }
      100% {
        width: 0%;
      }
  }
}

// Premier parametre : container class
// Second parametre : temps de l'animation en secondes
shrinking('.shrinking', 60);

我学习了 Codecademy 和 Treehouse 上的入门 JS 教程。但是我觉得我的知识还不足以理解那个 Codepen 中发生的事情。我想在没有手写笔的情况下重新创建常规 CSS/Javascript 中的内容。

有人能给我指出一些与创建此计时器相关的好教程的方向吗？

所以基本上我只想要一个随着设定的时间限制下降而缩小的条。

谢谢。

Answer 1

这很像他们在 codepen 上做的。他们只是计算出 css 动画的持续时间。

您可以将持续时间设置为一个固定值，例如 10s（10 秒），它是一样的。

animation-name: fillBar;
animation-duration: 10s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
animation-direction: alternate;

也让你成为了fiddle。不要忘记给它加上前缀。（包括 fiddle 中的前缀）。

如果您想了解有关动画和关键帧的更多信息，请单击 here、

和here是其他一些很好的例子。

参考文献：

css animation.

animation-name

animation-duration

animation-timing-function

animation-iteration-count

animation-direction

问候蒂米

如何制作 Javascript 计时器栏？

How to make a Javascript timer bar?

javascript

jquery

timer

animated