900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html实现圆形计时器特效 如何用css3实现圆形倒计时

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

时间:2021-04-18 14:08:49

相关推荐

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来实现该功能

参考地址:/web/css3demo/index.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。