the idea is to use animate to control the upward translation of the numbers on the following dial. After js obtains the local time, modify the order of the li of three ul, such as local time is 17:02:30, from 30 to 00:00 in seconds, the minute will not enter 1, only turn back to 30, the minute will enter 1, how can it enter 1 at 00? The expression is not very clear, I am a little dizzy, please understand.
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;
}
<!-- li42px -->
@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>