HTML5实现一个时钟动画

前期准备

先上效果图,颜色搭配暂时没考虑,以实现功能为主。

HTML5实现一个时钟动画_第1张图片

我们首先要理解如何去实现这个时钟,暂时不要考虑动画,学着将问题进行拆解,一步一步实现。

  • 首先我们需要画个方形,有个边框,给一个圆角就可以实现最外边的圆环
  • 再通过一个长的矩形旋转多个就可以实现刻度

HTML5实现一个时钟动画_第2张图片

  • 只要再画一个白色圆面去覆盖就可以实现标准的刻度

HTML5实现一个时钟动画_第3张图片

  • 最后再加上三个矩形和中间的小圆面就可以实现时钟的初始状态了

代码实现

以上过程理解了之后,代码实现就简单多了,唯一需要考虑的就是代码的优化问题,以下为了简单明了每一步是如何实现,存在很多重复的代码。

关于动画,我们只需要设置旋转动画就可以了,时分秒针的动画只需要改变不同的时间就可以了。

具体细节注意见代码:




    
    时钟
    


 

你可能感兴趣的:(HTML5)