.countdowntow {
font-size:  14px;
font-weight: bold;
font-family: Arial, sans-serif;
}

.countdowntow::before {
content: attr(data-number);

animation: countdowntowAnimation 2s steps(5) ;
opacity: 0.9; /* 数字透明度 */
transition: transform 3s ease-in-out; /* 添加过渡效果 */
}
.countdowntow:hover::before {
animation: glowAnimation 3s ease-in-out infinite; /* 添加发光动画 */
}
@keyframes glowAnimation {
0% {
text-shadow: none;
}

10% {

}

100% {
text-shadow: none;
}
}
@keyframes countdowntowAnimation {
0% {
content: "0001";
}
5% {
content: "0012";
}
10% {
content: "0023";
}
15% {
content: "0034";
}
20% {
content: "0045";
}
25% {
content: "0056";
}
30% {
content: "0067";
}
35% {
content: "0078";
}
40% {
content: "0089";
}
45% {
content: "0190";
}
50% {
content: "0201";
}
55% {
content: "0312";
}
60% {
content: "0423";
}
65% {
content: "0534";
}
70% {
content: "0645";
}
75% {
content: "0756";
}
80% {
content: "0867";
}
86% {
content: "0978";
}
90% {
content: "1089";
}
95% {
content: "1190";
}
100% {
content: "1200";
}
}


.countdown::before {
content: attr(data-number);

animation: countdownAnimation 2s steps(5) ;
opacity: 0.9; /* 数字透明度 */
transition: transform 2s ease-in-out; /* 添加过渡效果 */
}
.countdown:hover::before {
animation: glowAnimation 3s ease-in-out infinite; /* 添加发光动画 */
}
@keyframes glowAnimation {
0% {
text-shadow: none;
}

10% {
}

100% {
text-shadow: none;
}
}
@keyframes countdownAnimation {
0% {
content: "000001";
}
5% {
content: "000123";
}
10% {
content: "001234";
}
15% {
content: "012345";
}
20% {
content: "123456";
}
25% {
content: "234567";
}
30% {
content: "345678";
}
35% {
content: "456789";
}
40% {
content: "567890";
}
45% {
content: "678901";
}
50% {
content: "789012";
}
55% {
content: "890123";
}
60% {
content: "901234";
}
65% {
content: "012345";
}
70% {
content: "123456";
}
75% {
content: "234567";
}
80% {
content: "345678";
}
86% {
content: "456789";
}
90% {
content: "567890";
}
95% {
content: "678901";
}
100% {
content: "606786";
}
}