以下代碼參考：https://blog.csdn.net/whqet/article/details/19899733
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background: #333;
}
.cell {
width: 1em;
height: 1em;
border: 1px dashed rgba(255, 255, 255, 0.1);
font-size: 120px;
font-family: Frijole;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
margin: -0.5em 0 0 -0.5em;
}
.num {
position: absolute;
width: 1em;
color: #e53f39;
line-height: 1em;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
animation: run 5s steps(5) forwards;
}
.num>span{
cursor: pointer;
}
@keyframes run {
0% {
transform: translate(0,0);
}
100%{
transform: translate(0,-5em);
}
}
</style>
</head>
<body>
<div class="overlay"></div>
<div class="cell">
<div class="num">5 4 3 2 1 <span>X</span></div>
</div>
</body>
</html>
思路：通過移動num的位置，讓其看上去有跳動的效果溪胶。
用CSS動畫實現倒計時的背景：JS造成阻塞钻心，無法通過setTimeout和requestanimationframe實現倒計時效果。
而通過CSS實現倒計時如何讓頁面不卡頓陈惰，重點在于使用了transform.
transform和opacity不會引起頁面的重繪重排，故在JS阻塞的情況下，依然能正常渲染养涮。
@keyframes run {
0% {
transform: translate(0,0);
}
100%{
transform: translate(0,-5em);
}
如果采用定位的 top 等方式逢享，會導致頁面重繪重排罐监，在JS阻塞，頁面卡頓的情況下瞒爬，依然不能很好的實現倒計時弓柱。
@keyframes run {
0% {
top:0;
}
100%{
top:-5em;
}
transfrom與opacity資料參考：https://blog.csdn.net/devcloud/article/details/102739651
