HTML5扭曲指针时钟特效

扭曲感十足的时钟指针动画，用 Canvas 搞出来还挺有意思的。

Canvas 的画布配合 JavaScript 的setInterval()循环，让指针能按照当前时间实时转动。而且指针不是规规矩矩直直地动，而是有点扭、像橡皮筋一样弹一下，蛮有视觉冲击力的。

指针的绘制主要靠beginPath()、arc()、stroke()这几个 Canvas 老三样，代码逻辑也不复杂，看起来清楚，改起来也方便。

CSS3 这边也有发挥，比如给背景上个渐变，加点box-shadow，让整个时钟更立体。还可以用transform: rotate让元素顺滑转动，跟 Canvas 的动画配合起来，挺协调的。

嗯，如果你平时有做时间类交互组件，这种视觉化展示方式也许能给你点灵感。代码资源放在一个叫texiao4166_1560680992的压缩包里，解压看看，能学到不少 Canvas 画图技巧。

如果你还想看看类似的前端特效资源，像HTML5 加 css3 特效和Html5 加 CSS3 特效整合也蛮值得一看。

建议你试试自己改一下指针形状或加个鼠标交互，加深印象更快。