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

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

前端圆形进度图_使用CSS3实现圆形进度条
一般我们见到的进度条通常都是矩形的,从左往右开始推进,直到100%:但是很少有圆形的进度条,本篇文章稍微讲解下如何使用CSS3实现圆形进度条一般我们见到的进度条通常都是矩形的,从左往右开始推进,直到 ...
html圆形图片切换,jQuery和CSS3炫酷圆形图片切换特效
这是一款效果非常酷的jQuery和CSS3圆形图片切换特效.该圆形图片特效可以使用animate.css来制作图片的进入动画和离开动画.可以任意设置多张图片进行来回翻转.旋转切换,效果堪称一流. 使用 ...
html5游戏加入计时器,html5倒计时插件制作圆形计时器代码
特效描述:html5倒计时插件圆形计时器代码.计时器代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 jQuery计时器插件TimeCircles演示1 演示1(默认+美化) 演示2 ...
如何用css3实现简单旋转的风车
如何用css3实现简单旋转的风车在DW中想要实现旋转的风车就要使用关键帧keyframes来设置旋转,其实也没什么难度的.先设置它的样式,然后要用定位把它放到合适的位置就可以了. HTML的代码如下 ...
php设置加载动画,如何用CSS3制作页面圆圈加载动画（附代码）
打开页面时,经常会遇到页面正在加载的情况,作为一个前端工程师,你知道如何用CSS3实现页面加载动画效果吗?这篇文章就和大家分享一个炫酷的圆圈加载动画效果的代码,有一定的参考价值,感兴趣的朋友可以看看. ...
html5倒计时效果,html5+css3进度条倒计时动画特效代码【推荐】
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
html进度条倒计时代码,html5+css3进度条倒计时动画特效代码【推荐】_html5教程技巧...
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
使用CSS3实现圆形进度条
使用CSS3实现圆形进度条导语: 一般我们见到的进度条通常都是矩形的,从左往右开始推进,直到100%:但是很少有圆形的进度条,本篇文章稍微讲解下如何使用CSS3实现圆形进度条一般我们见到的进度条通 ...
h5动画 php,HTML_多视角3D逼真HTML5水波动画，html5+css3进度条倒计时动画特效 - phpStudy...
多视角3D逼真HTML5水波动画 html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了htm ...

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

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

最新文章

热门文章