css3 实现圆形旋转倒计时


Posted in HTML / CSS onFebruary 24, 2018

很多答题的H5界面上有旋转倒计时的效果,一个不断旋转减少的动画,类似于下图的这样。

css3 实现圆形旋转倒计时

今天研究了下,可以通过border旋转得到。一般我们可以通过border得到一个四段圆。

css3 实现圆形旋转倒计时

See the Pen circle by stoneniqiu (@stoneniqiu) on CodePen.

 接下来接可以通过旋转的方式形成一个倒计时的效果:

See the Pen circle-rotate by stoneniqiu (@stoneniqiu) on CodePen.

 一开始旋转45度是为了让半圆刚好立起来。然后旋转一百八十度。

.rightcircle{
                border-top: .4rem solid #8731fd;
                border-right: .4rem solid #8731fd;
                right: 0;
                transform: rotate(45deg)
            }
 .right_cartoon {
                -webkit-animation: circleProgressLoad_right 10s linear infinite forwards;
                animation: circleProgressLoad_right 10s linear infinite forwards;
            }
 @keyframes circleProgressLoad_right {
                0% {
                    -webkit-transform: rotate(46deg);
                    transform: rotate(46deg)
                }
                50%,to {
                    -webkit-transform: rotate(-136deg);
                    transform: rotate(-136deg)
                }
            }

毕竟不是真正的减少,要出现一种颜色占大多数就可以通过两个半圆来拼凑。

See the Pen circle-timer by stoneniqiu (@stoneniqiu) on CodePen.
 

css3 实现圆形旋转倒计时

@keyframes circleProgressLoad_left {
                0%,50% {
                    -webkit-transform: rotate(46deg);
                    transform: rotate(46deg)
                }           
                to {
                    -webkit-transform: rotate(-136deg);
                    transform: rotate(-136deg)
                }
            }

注意到是右边线转5秒,然后左边再等五秒,这里css动画的效果略有不同,右边是0%开始,50%,to。左边是0%,50%,然后to,这样实现的5秒等待。这就是旋转倒计时的效果,最后还可以通过修改左半环border-left的颜色,来凸显最后几秒钟的紧急情况。

总结

以上所述是小编给大家介绍的css3 实现圆形旋转倒计时,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
详解CSS3伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 #HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 #HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 #HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 #HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 #HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 #HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 #HTML / CSS
You might like
php批量删除数据
2007/01/18 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
javascript 写类方式之七
2009/07/05 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
浅析Python中的for 循环
2016/06/09 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
python中subprocess批量执行linux命令
2018/04/27 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
学习Python爬虫的几点建议
2020/08/05 Python
Python timeit模块原理及使用方法
2020/10/10 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
工作检讨书怎么写
2015/01/23 职场文书
小学运动会开幕词
2015/01/28 职场文书
结婚堵门保证书
2015/05/08 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
JS数组去重详情
2021/11/07 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js