一款通过CSS结合JavaScript技术实现的翻页效果数字时钟,数字时钟的时分秒数字变化像是翻页一样特别的有创意。基本的HTML代码结构如下,通过CSS设置时分秒三块区域的样式及动画效果,JS驱动指针行走,最终实现翻页效果数字时钟。
<div class="clock"> <div class="clock__unit" data-unit="h"> <div class="clock__digits" data-prev>23</div> <div class="clock__digits" data-prev>23</div> <div class="clock__digits" data-next>00</div> <div class="clock__digits" data-next>00</div> </div> <div class="clock__unit" data-unit="m"> <div class="clock__digits" data-prev>59</div> <div class="clock__digits" data-prev>59</div> <div class="clock__digits" data-next>00</div> <div class="clock__digits" data-next>00</div> </div> <div class="clock__unit" data-unit="s"> <div class="clock__digits" data-prev>59</div> <div class="clock__digits" data-prev>59</div> <div class="clock__digits" data-next>00</div> <div class="clock__digits" data-next>00</div> </div> </div>