又一款js时钟!transform实现时钟效果

前端之家收集整理的这篇文章主要介绍了又一款js时钟!transform实现时钟效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

又来一个时钟效果了,这个的实现不需要canvas,都是div、ul、li画出的,好玩有真实。

哈哈~

需要的js才能实现到走动这个效果,但js的内容不多,也不难。 主要是一个css里transform的使用的思路,transform里有很多变幻属性,而普通的时钟 在我心中就是个圆圆的东西,那么是不是可以旋转这个属性(rotate)实现了,它的刻度 使用旋转且把旋转点设置在圆心,那不就可以绕着圆心转了吗,而时针它们的底部不是和 圆心接触的吗,那么设置时针的底部为旋转点不就OK了,大概的说了说思路。

代码

<Meta charset="UTF-8"> transform