最近在工作中需要做一个圆圈倒计时,刚开始的想法是做个纯数字的倒计时即可,可是需求觉得这个不太好看,想加个倒计时进度条。于是就有了接下来的分析过程...

我们知道CSS3可以很方便的画圆,圆环,然后在加上一个旋转动画不就可以实现了吗?

于是先把圆环画出来了

做到这里问题又来了,如何让红色的圆环一点一点的消失呢?此处一个圆环再怎么旋转终究是一个圆环,
此时觉得一个圆可能不够,何不在画一个白色的半圆再旋转呢?可是白色的半圆又如何一点一点的显示呢?貌似又回到了问题的起点。
我们知道overflow:hidden;可以让多余的部分隐藏,如果在配合两个半圆旋转不就可以实现了吗?
先画两个半圆试试
左半圆

右半圆

如果都顺时针旋转45度再刚刚好拼在一起就是一个完整的圆环

.circleProgress_wrapper{
width: 160px;
height: 160px;
margin: 10px auto;
position: relative;
}
.wrapper{
width: 80px;
height: 160px;
position: absolute;
top:0;
/*overflow: hidden;*/
}
.right{
right:0;
}
.left{
left:0;
}
.circleProgress{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
/*transform: rotate(45deg);*/
}
.rightcircle{
border-top:20px solid red;
border-right:20px solid red;
right:0;
animation: circleProgressLoad_right 6s linear infinite;
}
.leftcircle{
border-bottom:20px solid red;
border-left:20px solid red;
left:0;
animation: circleProgressLoad_left 6s linear infinite;
}

此时当我们再旋转的时候发现,圆环可以实现一点一点的消失了,但是当转过一个180度的时候这个半圆右出现了,此时我们可以用到前面的overflow:hidden;

CSS代码如下

  1. .circleProgress_wrapper{
  2. width: 160px;
  3. height: 160px;
  4. margin: 10px auto;
  5. position: relative;
  6. }
  7. .wrapper{
  8. width: 80px;
  9. height: 160px;
  10. position: absolute;
  11. top:0;
  12. overflow: hidden;
  13. }
  14. .right{
  15. right:0;
  16. }
  17. .left{
  18. left:0;
  19. }
  20. .circleProgress{
  21. width: 160px;
  22. height: 160px;
  23. border:20px solid transparent;
  24. border-radius: 50%;
  25. position: absolute;
  26. top:0;
  27. /*transform: rotate(45deg);*/
  28. }
  29. .rightcircle{
  30. border-top:20px solid red;
  31. border-right:20px solid red;
  32. right:0;
  33. animation: circleProgressLoad_right 6s linear infinite;
  34. }
  35. .leftcircle{
  36. border-bottom:20px solid red;
  37. border-left:20px solid red;
  38. left:0;
  39. animation: circleProgressLoad_left 6s linear infinite;
  40. }

接下来用css3写个旋转动画即可

  1. .rightcircle{
  2. border-top:20px solid red;
  3. border-right:20px solid red;
  4. right:0;
  5. animation: circleProgressLoad_right 6s linear infinite;
  6. }
  7. .leftcircle{
  8. border-bottom:20px solid red;
  9. border-left:20px solid red;
  10. left:0;
  11. animation: circleProgressLoad_left 6s linear infinite;
  12. }
  13. @keyframes circleProgressLoad_right{
  14. 0%{
  15. transform: rotate(45deg);
  16. }
  17. 50%,100%{
  18. transform: rotate(225deg);
  19. }
  20. }
  21. @keyframes circleProgressLoad_left{
  22. 0%,50%{
  23. transform: rotate(45deg);
  24. }
  25. 100%{
  26. transform: rotate(225deg);
  27. }
  28. }

完整的demo可以查看下面的实例

目前这里的倒计时动画是动画时间是6s,这里可以根据需要自行修改,这里的运行时间我在项目中是用js控制的,这样可以根据后台下发的时间值来倒计时,非常方便。

CSS3创建圆圈进度条的更多相关文章

  1. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  2. CSS3时钟式进度条

    CSS3时钟式进度条,加载完成时生成一个圆,数字慢慢变成100,适时的显示加载进度.友情提醒,如果预览时网页左下角提示错误,刷新一下就可以看到效果了:实际使用中不会出现这样的问题. <!DOCT ...

  3. CSS3实现圆环进度条

    摘要:圆环进度条被应用于各个场景,比如我们可以用来表示加载进度等.通常我们可以用 css3 的动画去实现. 详解 css3 实现圆环进度条 简单的画一个圆环,我们都知道如何使用 css 画一个圆环.( ...

  4. css3 制作圆环进度条

    引子 移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给 ...

  5. CSS3实现圆形进度条

    介绍 闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条.粗略看了下代码,发现原理其实很简单,不难理解. 现在在此讲述下原理并实现一个1s更新的进度条. 技术细节 ...

  6. css3飞机起飞进度条

    效果:http://hovertree.com/texiao/css3/27/ 源码下载:http://hovertree.com/h/bjaf/pgwql1x2.htm 本效果使用Font Awes ...

  7. 【JavaScript】HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

  8. 纯CSS3实现圆形进度条动画

    悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...

  9. 超简单CSS3水平动态进度条+小圆球+背景色渐变

    实现的的效果图如下:效果是动态加载的 代码如下: <!DOCTYPE html> <html lang="en"> <head> <met ...

随机推荐

  1. django rest framework serializers解读

    serializers是什么?官网是这样的"Serializers allow complex data such as querysets and model instances to b ...

  2. [视频]K8飞刀 正则采集WordPress站点用户

    链接:https://pan.baidu.com/s/16NCuC-mD4-3dxfVdcIFkxg 提取码:k3bw

  3. (转)Linux开启路由转发功能

    原文:https://www.linuxidc.com/Linux/2016-12/138661.htm 标记一下,今天想让一台Red Hat Enterprise Linux 7开通iptables ...

  4. li内有span需要右浮的问题

    图一和图二换了一下span的位置,但是其页面展示是一样的,兼容性比较好的是第二种

  5. Hadoop生态系统之Yarn

    Apache YARN(Yet Another Resource Negotiator) 是Hadoop的集群资源管理系统.YARN被引入Hadoop2最初是为了改善MapReduce的实现,但它具有 ...

  6. 高手速成android开源项目【View篇】

    主要介绍那些不错个性化的View,包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.ProgressBar及其他如Dialo ...

  7. 使用Jenkins部署Spring Boot项目

    jenkins是devops神器,本篇文章介绍如何安装和使用jenkins部署Spring Boot项目 jenkins搭建 部署分为三个步骤: 第一步,jenkins安装 第二步,插件安装和配置 第 ...

  8. Hadoop项目实战-用户行为分析之应用概述(一)

    1.概述 本课程的视频教程地址:<Hadoop 回顾> 好的,下面就开始本篇教程的内容分享,本篇教程我为大家介绍我们要做一个什么样的Hadoop项目,并且对Hadoop项目的基本特点和其中 ...

  9. 从完整备份恢复单个innodb表

    现在大多数同学在线上采取的备份策略都是xtrabackup全备+binlog备份,那么当某天某张表意外的删除那么如何从xtrabackup全备中恢复呢?从mysql 5.6版本开始,支持可移动表空间( ...

  10. spring-boot-2.0.3应用篇 - shiro集成

    前言 上一篇:spring-boot-2.0.3源码篇 - 国际化,讲了如何实现国际化,实际上我工作用的模版引擎是freemaker,而不是thymeleaf,不过原理都是相通的. 接着上一篇,这一篇 ...