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实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 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
对javascript和select部件的结合运用
2006/10/09 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
joomla数据库操作示例代码
2016/01/06 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
python logging类库使用例子
2014/11/22 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
python函数的5种参数详解
2017/02/24 Python
python 不以科学计数法输出的方法
2018/07/16 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
什么是命名空间(NameSpace)
2015/11/24 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
会计毕业生自我鉴定
2013/11/04 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript