javascript - 倒数计时器css分析

Question

我正在尝试了解有关前端 Web 开发的更多信息，并尝试查看我在 Web 上找到的不同酷元素的页面源。我遇到了this并试图了解他们是如何为倒计时制作 css 的。我只理解部分 html，并且找到了他们保存示例的位置:

<div class="countdown-container" id="main-example">

如果我能够在 jsfiddle 中重现它会更清楚，但我不能。感谢任何见解。

Answer 1

要实现这种“向下翻转”效果，您可以使用 css 动画或过渡。

下面是如何使用 css 动画(减去样式)的快速浏览。转换将以类似方式工作，但需要更改状态(例如 :hover)。

@-webkit-keyframes flip-top {
  0% {
    transform: rotateX(0deg);
    transform-origin: 50% 100%;
  }
  50% {
    transform: rotateX(-90deg);
  }
  100% {
    transform: rotateX(-90deg);
    transform-origin: 50% 100%;
  }
}
@-webkit-keyframes flip-bottom {
  0% {
    transform: rotateX(-90deg);
    transform-origin: 100% 0%;
  }
  50% {
    transform: rotateX(-90deg);
  }
  100% {
    transform: rotateX(0deg);
    transform-origin: 100% 0%;
  }
}.top.curr {
  z-index: 1;
  -webkit-animation: flip-top 2s ease-in infinite;
}

.top.next {
  z-index: 0;
}

.bottom.curr {
  z-index: 0;
}

.bottom.next {
  z-index: 1;
  -webkit-animation: flip-bottom 2s ease-out infinite;
}

这里有一个例子:plnkr

注意:我只为 chrome 添加了前缀，所以你应该用 chrome 打开它或添加额外的前缀。