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中发生了什么。我想在没有Stylus的情况下重新创建常规CSS / Javascript中的内容。

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

所以基本上我只想要一个在设定的时间限制下降时收缩的栏。

感谢。

Answer 1

就像他们在codepen上做的那样。他们只是获得了css动画的计算持续时间。

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

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

也让你成为fiddle。别忘了给它添加前缀。（包括小提琴的前缀）。

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

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

参考文献：

css animation.

animation-name

animation-duration

animation-timing-function

animation-iteration-count

animation-direction

问候timmi

如何制作Javascript计时器栏？

1 个答案: