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教程(6):创建网站多列
Apr 02 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 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对象Object的概念 介绍
2012/06/14 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
python读取LMDB中图像的方法
2018/07/02 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
墨西哥购物网站:Elektra
2020/01/21 全球购物
自我鉴定模板
2013/10/29 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
护理职业生涯规划书
2014/01/24 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
用电申请报告范文
2015/05/18 职场文书
培根随笔读书笔记
2015/07/01 职场文书