html实现圆形计时器特效,如何用css3实现圆形倒计时

背景：

因开发需求需要实现一个圆形倒计时功能，具体的倒计时时间是根据功能来；查了一些资料，最终确定用css3和js来完成

实现效果如下：

倒计时效果图

白色圆弧部分是已经过去的时间，中间的文案是倒计时所剩时间

旋转采用css3的动画样式transform的rotate属性实现，动态效果则结合js的setInterval实现

HTML代码结构：

实现该功能可理解为需要拆分成四部分代码块：左边半圆，右边半圆[分两个半圆是为了实现旋转出来的效果]，背景[一个圆，颜色同上图白色圆弧]，时间文案

html结构

CSS样式：

css样式

JS实现【大家可以用标准写法】：

1.先实现倒计时旋转效果，动态改变旋转角度方法2个[分别针对左右半圆]，右半圆旋转到180度时，开始左半圆的旋转效果

倒计时1参数说明：

deg：每次旋转的角度，如5秒，deg=parseFloat(360/(5*10)).toFixed(3);一共转50下[每0.1s转一次]

totalCount：一共转的次数

其他说明：

当转数已经达到总转数的一半时，清理右半圆的循环事件，开始左半圆循环

2.实现倒计时中的文本动态改变

根据所剩秒数展示时间

时间格式转换时间展示格式为00:00，因此需要根据所剩秒数实时计算对应的分钟数和富余的秒数，同时将其转换成固定格式

整个过程只要明白了左右半圆的动画流程，基本就能理解了

题外话：

想到动态效果，也很容易想到html5的动画特性，它也有画圆形、圆弧等功能；后序会更新一篇用画布canvas来实现该功能

参考地址：http://www.yangqq.com/web/css3demo/index.html