js或css制作时钟问题

嗯嗯
  • 30

思路是通过animate控制下面表盘的数字向上平移,js获取本地时间后,修改了三个ul的li的顺序,例如本地时间为17:02:30,在秒钟从30到00时,分钟却不会进1,只有重新转到30,分钟才进1,怎么才能让它在00的时候进1?表达不是很清楚,我自己都有点晕,请谅解。
图片描述

css:
.hour {
    animation: h 43200s steps(60, end) infinite;
}
.minute {
    animation: ms 3600s steps(60, end) infinite;
}
.second {
    animation: ms 60s steps(60, end) infinite;
}            
<!-- 一个li的高度为42px -->
@keyframes ms {to { transform:translateY(-2520px) }}
@keyframes h {to { transform:translateY(-1008px) }
html:
<ul class="hour">
    <li>01</li>
    。
    。
    。
    <li>23</li>
    <li>00</li>
</ul>
<ul class="minute">
    <li>01</li>
    <li>02</li>
    。
    。
    。
    <li>59</li>
    <li>00</li>
</ul>
<ul class="second">
    <li>01</li>
    <li>02</li>
    。
    。
    。
    <li>59</li>
    <li>00</li>
</ul>
回复
阅读 1.1k
1 个回答

30到00是什么鬼?你确定不是59到00?

宣传栏