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绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 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
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
基于jquery的分页控件(C#)
2011/01/06 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
JS实现轮播图效果
2020/01/11 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
讲解Python中的递归函数
2015/04/27 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
.net开发工程师面试题
2014/02/25 面试题
园林设计师自荐信
2013/11/18 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
小学教师国培感言
2014/02/08 职场文书
初中作文评语
2014/12/25 职场文书