文档章节

详解用CSS3制作圆形滚动进度条动画效果

呵呵闯
 呵呵闯
发布于 2016/06/19 18:58
字数 2304
阅读 10
收藏 0

主  题

      今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客CSS实现进度条和订单进度条》,但是呢,那篇博客只是制作出来效果而已,并没有动画效果,因为当时正期末复习期间,所以就省了制作动画的时间成本。所以,今天就一起把各种效果都实现吧!

内  容

      先看一下效果图,会提升我们的学习兴趣哟:

3

      好的,我将按照此图从上到下的顺序讲解,由于第一和第二种效果之气那篇博客《CSS实现进度条和订单进度条》已经介绍过怎么做的了,这里就把重心放在动画上面,对于圆形效果是重点,我将详细讲解。

第一种效果:

html结构:

<div id="progress">
      <span></span>
</div>

css样式:

复制代码

#progress{
  width: 50%;
  height: 30px;
  border:1px solid #ccc;
  border-radius: 15px;
  margin: 50px 0 0 100px;
  overflow: hidden;
  box-shadow: 0 0 5px 0px #ddd inset;
}
#progress span {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #2989d8; /* Old browsers */
  background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */
  background: -webkit-gradient(linear, left bottom, right top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Opera 11.10+ */
  background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* IE10+ */
  background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  background-size: 60px 30px;
  text-align: center;
  color:#fff;
  -webkit-animation:load 3s ease-in;
  }
  @-webkit-keyframes load{
  0%{
     width: 0%;
  }
  100%{
     width:100%;
  }
}

复制代码

可以看到其实这种进度条的动画是最容易实现的,根据具体进度百分比设置默认的width百分比和动画里100%处的width百分比就行了,比如说,我想实现70%的进度条动画效果,那么我只需要修改一下两处地方:

复制代码

#progress span{
    width: 70%;
}
@-webkit-keyframes load{
      0%{
        width: 0%;
      }
    100%{
        width:70%;
      }
}

复制代码

 

第二种效果:

html结构:

复制代码

<div id="progressBar">
      <!-- 进度条 -->
      <div>
        <span></span>
      </div>
      <!-- 五个圆 -->
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
 </div>

复制代码

css样式:

复制代码

       #progressBar{
            width: 80%;
            height: 50px;
            position: relative;
            margin: 50px 0 0 100px;
        }
        #progressBar div{
            width: 100%;
            height: 10px;
            position: absolute;
            top:50%;
            left: 0;
            margin-top:-20px;
            background: #ccc;
        }
        #progressBar div span{
            position: absolute;
            display: inline-block;
            background: green;
            height: 10px;
            width: 100%;
            -webkit-animation:bgLoad 5.5s linear;
        }
        @-webkit-keyframes bgLoad{
            0%{
                width: 0%;
            }
            18.18%,27.27%{
                width:25%;
            }
            45.45%,54.54%{
                width: 50%;
            }
            72.72%,81.81%{
                width: 75%;
            }
            100%{
                width:100%;
            }
        }
        #progressBar>span{
            position: absolute;
            top:0;
            margin-top: -10px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #ccc;
            margin-left: -20px;
            color:#fff;
        }
        @-webkit-keyframes circleLoad_1{
            0%,66.66%{
                background: #ccc;
            }
            100%{
                background:green;
            }
        }
        @-webkit-keyframes circleLoad_2{
            0%,83.34%{
                background: #ccc;
            }
            100%{
                background:green;
            }
        }
        @-webkit-keyframes circleLoad_3{
            0%,88.88%{
                background: #ccc;
            }
            100%{
                background:green;
            }
        }
        @-webkit-keyframes circleLoad_4{
            0%,91.67%{
                background: #ccc;
            }
            100%{
                background:green;
            }
        }
        #progressBar span:nth-child(2){
            left: 0%;background:green;
        }
        #progressBar span:nth-child(3){
            left: 25%;background:green;
            -webkit-animation:circleLoad_1 1.5s ease-in;
        }
        #progressBar span:nth-child(4){
            left: 50%;background:green;
            -webkit-animation:circleLoad_2 3s ease-in;
        }
        #progressBar span:nth-child(5){
            left: 75%;background:green;
            -webkit-animation:circleLoad_3 4.5s ease-in;
        }
        #progressBar span:nth-child(6){
            left: 100%;background:green;
            -webkit-animation:circleLoad_4 6s ease-in;
        }

复制代码

可以看到,其实对于动画本身是很简单的,一看就明白了,主要就是动画持续时间的计算,由于这个动画效果只执行一次,所以其实也可以用动画延迟时间来保证各个动画在指定的时间点开始执行,但是对于循环或者多次动画效果,延迟很不灵活,所以这里还是用持续时间的长短来控制动画的执行时间。

这个订单进度条,我是设置了走一段用时1秒,然后每到一个圆点就停顿0.5秒,而这0.5秒就是相对应的圆点的动画持续执行时间。但是再次强调这个是单次动画,如果想实现循环动画,还是得做调整的,必须让所有动画的持续执行时间是一样的,不然循环起来就错乱的。而时间的改动也会影响动画关键帧的改动,下面对第一小段和第二个圆的动画时间讲解一下

首先,细长条的动画持续时间通过计算:

4小段x1秒 + 中间3个圆点 x 0.5秒 = 5.5秒

接下来就是计算细长条动画关键帧的时间分配,设每一份0.5秒,那么共总就是11份,每小段得2份,每个圆点得1份,用100%除以11,可得每份大约是9.09%,接下来就是分配时间了,这个就简单了,不多说。

接着,当细长条完成第一小段的动画效果到达第二个圆点时,会停顿0.5秒,而这0.5秒就是第二个圆点的动画时间,所以第二个圆点的动画持续时间就是:

等待细长条执行完1小段 x1秒+自身的动画完成时间x0.5秒=1.5秒

同样的方法计算每一份的时间然后进行分配。同理,其他动画效果相似,就不再赘述了。

第三种效果:

今天就重点讲解这个效果,首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了:

.circleprogress{
    width: 160px;
    height: 160px;
    border:20px solid red;
    border-radius: 50%;
}

360截图20150726142932212

然后就会说,这很简单嘛。但是如果不是完整圆形的呢?想了想:

复制代码

.circleprogress{
    width: 160px;
    height: 160px;
    border:20px solid red;
    border-left:20px solid transparent;
    border-bottom:20px solid transparent;
    border-radius: 50%;
}

复制代码

360截图20150726143242282

然后还是会说,这个也不难啦。可是,如果不是刚好都是45度的倍数呢?

OK,我们先设置一个200x200的方块,然后我们在这里面完成我们的效果:

复制代码

.circleProgress_wrapper{
    width: 200px;
    height: 200px;
    margin: 50px auto;
    position: relative;
    border:1px solid #ddd;
}

复制代码

360截图20150726143838566

接下来我将在这个容器里再放两个矩形,每个矩形都占一半:

复制代码

<div class="circleProgress_wrapper">
        <div class="wrapper right">
            <div class="circleProgress rightcircle"></div>
        </div>
        <div class="wrapper left">
            <div class="circleProgress leftcircle"></div>
        </div>
 </div>

复制代码

复制代码

.wrapper{
    width: 100px;
    height: 200px;
    position: absolute;
    top:0;
    overflow: hidden;
}
.right{
    right:0;
}
.left{
    left:0;
}

复制代码

360截图20150726144413722

这里重点说一下.wrapper 的overflow:hidden; 起着关键性作用。这两个矩形都设置了溢出隐藏,那么当我们去旋转矩形里面的圆形的时候,溢出部分就被隐藏掉了,这样我们就可以达到我们想要的效果。

从html结构也已看到,在左右矩形里面还会各自有一个圆形,先讲一下右半圆:

复制代码

.circleProgress{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
}
.rightcircle{
    border-top:20px solid green;
    border-right:20px solid green;
    right:0;
}

复制代码

360截图20150726150116784

可以看到,效果已经出来了,其实本来是一个半圆弧,但由于我们设置了上边框和右边框,所以上边框有一半溢出而被隐藏了,所以我们可以通过旋转得以还原:

复制代码

.circleProgress{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
    -webkit-transform: rotate(45deg);
}

复制代码

360截图20150726150416349

所以只要旋转自己想要的角度就可以实现任意比例的进度条。接下来把左半圆弧也实现,变成一个全圆:

.leftcircle{
    border-bottom:20px solid green;
    border-left:20px solid green;
    left:0;
}

360截图20150726150724764

紧接着,就是让它动起来,原理是这样的,先让右半圆弧旋转180度,再让左半圆弧旋转180度,这样,两个半圆弧由于先后都全部溢出而消失了,所以看起来就是进度条再滚动的效果:

复制代码

        .rightcircle{
            border-top:20px solid green;
            border-right:20px solid green;
            right:0;
            -webkit-animation: circleProgressLoad_right 5s linear infinite;
        }
        .leftcircle{
            border-bottom:20px solid green;
            border-left:20px solid green;
            left:0;
            -webkit-animation: circleProgressLoad_left 5s linear infinite;
        }
        @-webkit-keyframes circleProgressLoad_right{
            0%{
                -webkit-transform: rotate(45deg);
            }
            50%,100%{
                -webkit-transform: rotate(225deg);
            }
        }
        @-webkit-keyframes circleProgressLoad_left{
            0%,50%{
                -webkit-transform: rotate(45deg);
            }
            100%{
                -webkit-transform: rotate(225deg);
            }
        }

复制代码

ee

当然,我们只需要调整一下角度就可以实现反向的效果:

复制代码

        .circleProgress{
            width: 160px;
            height: 160px;
            border:20px solid transparent;
            border-radius: 50%;
            position: absolute;
            top:0;
            -webkit-transform: rotate(-135deg);
        }
        @-webkit-keyframes circleProgressLoad_right{
            0%{
                -webkit-transform: rotate(-135deg);
            }
            50%,100%{
                -webkit-transform: rotate(45deg);
            }
        }
        @-webkit-keyframes circleProgressLoad_left{
            0%,50%{
                -webkit-transform: rotate(-135deg);
            }
            100%{
                -webkit-transform: rotate(45deg);
            }
        }

复制代码

eee

好的,接下来就是奔向最终效果了,正如我们一开始看到的那样,有点像我们使用360卫士清理垃圾时的类似效果,当然不是很像啦:

复制代码

        .circleProgress_wrapper{
            width: 200px;
            height: 200px;
            margin: 50px auto;
            position: relative;
            border:1px solid #ddd;
        }

        .wrapper{
            width: 100px;
            height: 200px;
            position: absolute;
            top:0;
            overflow: hidden;
        }
        .right{
            right:0;
        }
        .left{
            left:0;
        }
        .circleProgress{
            width: 160px;
            height: 160px;
            border:20px solid rgb(232, 232, 12);
            border-radius: 50%;
            position: absolute;
            top:0;
            -webkit-transform: rotate(45deg);
        }
        .rightcircle{
            border-top:20px solid green;
            border-right:20px solid green;
            right:0;
            -webkit-animation: circleProgressLoad_right 5s linear infinite;
        }
        .leftcircle{
            border-bottom:20px solid green;
            border-left:20px solid green;
            left:0;
            -webkit-animation: circleProgressLoad_left 5s linear infinite;
        }
        @-webkit-keyframes circleProgressLoad_right{
            0%{
                border-top:20px solid #ED1A1A;
                border-right:20px solid #ED1A1A;
                -webkit-transform: rotate(45deg);
            }
            50%{
                border-top:20px solid rgb(232, 232, 12);
                border-right:20px solid rgb(232, 232, 12);
                border-left:20px solid rgb(81, 197, 81);
                border-bottom:20px solid rgb(81, 197, 81);
                -webkit-transform: rotate(225deg);
            }
            100%{
                border-left:20px solid green;
                border-bottom:20px solid green;
                -webkit-transform: rotate(225deg);
            }
        }
        @-webkit-keyframes circleProgressLoad_left{
            0%{
                border-bottom:20px solid #ED1A1A;
                border-left:20px solid #ED1A1A;
                -webkit-transform: rotate(45deg);
            }
            50%{
                border-bottom:20px solid rgb(232, 232, 12);
                border-left:20px solid rgb(232, 232, 12);
                border-top:20px solid rgb(81, 197, 81);
                border-right:20px solid rgb(81, 197, 81);
                -webkit-transform: rotate(45deg);
            }
            100%{
                border-top:20px solid green;
                border-right:20px solid green;
                border-bottom:20px solid green;
                border-left:20px solid green;
                -webkit-transform: rotate(225deg);
            }
        }

复制代码

可以看到,其实就是多了一些改变不同边框颜色的动画而已,这个就给大家自己去实践吧!主要还是利用两个矩形来完成这么一个圆形进度条效果,特别注意overflow这条规则,起着关键作用。

 

PS:若转载请注明出处,谢谢!

本文转载自:http://www.cnblogs.com/jr1993/p/4677921.html

共有 人打赏支持
呵呵闯
粉丝 3
博文 63
码字总数 15949
作品 0
深圳
程序员
50 个优秀 CSS3 技巧和优美的设计教程

Filter Functionality with CSS3 Thumbnail Proximity Effect with jQuery and CSS3 Fullscreen Background Image Slideshow with CSS3 CSS3 灯箱 Slopy Elements with CSS3 Item Blur Effec......

红薯
2012/01/11
2.4K
0
微信小程序特殊效果合集—左滑、气泡各种酷炫动画

微信小程序的开发并不难,但是有时我们想做出比较炫的效果,可能会一时没有思路或找不到方法。下面就整理了微信小程序的一些特殊效果的案例,均来自网络,供你参考。 1、文字跑马灯效果:htt...

anda0109
2017/08/08
0
0
requestanimationframe用法一二(总结别人的)

基本语法 可以直接调用,也可以通过window来调用,接收一个函数作为回调,返回一个ID值,通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画。 requestAnimationFrame(callba...

leona_lily
2015/06/09
0
0
10 款提高开发效率的 jQuery/CSS3 组件

前端开发是一项十分繁琐而又耗体力的工作,如何更有效率的开发我们的应用,很多人会选择适当地使用一些jQuery插件。今天就要给大家分享10款可以提高开发效率的jQuery/CSS3组件。部分插件可以...

yykj
2013/10/29
491
2
Animation_ProgressAnimation

Welcome to my blog. Thanks. Dome: github地址 今天主要讲一些动画的运用,也就是进度条,有弧形的,扇形的,圆形的。 其实没什么难点,我封装在一个个View里,直接调用就行,弧度跟着进度条...

iOS小童
2017/11/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

最全最强解析:支付宝钱包系统架构内部剖析(架构图)

支付宝系统架构概况 典型处理默认 资金处理平台 财务会计 支付清算 核算中心 交易 柔性事务 支付宝的开源分布式消息中间件–Metamorphosis(MetaQ) Metamorphosis (MetaQ) 是一个高性能、高可...

晨猫
28分钟前
4
0
竞品分析

那什么样的场景需要用关键纬度分析法分析竞品呢? 竞品分析的目的是为了看竞品们和自己产品重合的业务都具备哪些功能点,以及这些功能是怎么做的,以此确定自己产品的优化方向。 竞品们的业务...

于谦老师
36分钟前
1
0
OSChina 周三乱弹 —— 公司女同事约我

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享水木年华的单曲《蝴蝶花(2002年大提琴版)》 《蝴蝶花(2002年大提琴版)》- 水木年华 手机党少年们想听歌,请使劲儿戳(这里) ...

小小编辑
今天
1K
16
Linux环境搭建 | VMware下共享文件夹的实现

在进行程序开发的过程中,我们经常要在主机与虚拟机之间传递文件,比如说,源代码位于虚拟机,而在主机下阅读或修改源代码,这里就需要使用到 「共享文件」 这个机制了。本文介绍了两种共享文...

良许Linux
今天
9
0
JUC锁框架——AQS源码分析

JUC锁介绍 Java的并发框架JUC(java.util.concurrent)中锁是最重要的一个工具。因为锁,才能实现正确的并发访问。而AbstractQueuedSynchronizer(AQS)是一个用来构建锁和同步器的框架,使用A...

长头发-dawn
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部