我正在尝试了解有关前端 Web 开发的更多信息,并尝试查看我在 Web 上找到的不同酷元素的页面源。我遇到了this并试图了解他们是如何为倒计时制作 css 的。我只理解部分 html,并且找到了他们保存示例的位置:
<div class="countdown-container" id="main-example">
如果我能够在 jsfiddle 中重现它会更清楚,但我不能。感谢任何见解。
最佳答案
要实现这种“向下翻转”效果,您可以使用 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 打开它或添加额外的前缀。
关于javascript - 倒数计时器css分析,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25902556/