如何用css3实现圆形倒计时如何用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来实现该功能

【如何用css3实现圆形倒计时】参考地址：http://www.yangqq.com/web/css3demo/index.html