CSS3制作圆环进度动画效果

标签：, 3661View

今天在微博上分享了一篇关于“CSS3进度圆环”的做法，然后回来搜了一下，发现了这个比较给力的做法和解说。分享给大家：

原文来自：详解用CSS3制作圆形滚动进度条动画效果

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

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

FnYZvu

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

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

QjiaEj

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

OK，我们先设置一个200×200的方块，然后我们在这里面完成我们的效果：

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

JV3Ijy

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

<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;
}

iuqQre

这里重点说一下.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;
}

beeqeeN

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

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

v6j2ue

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

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

iM3Eb2

紧接着，就是让它动起来，原理是这样的， 先让右半圆弧旋转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);
  }
}

7nmQZbZ

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

    .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);
  }
}

fm2YFnu

好的，接下来就是奔向最终效果了，正如我们一开始看到的那样，有点像我们使用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这条规则，起着关键作用。

相关文章

  • CSS3仿手机客户端展开和关闭菜单动画效果

    在手机客户端上，我们常常会发现有很多这样子的效果，点击某个按钮，左边隐藏的菜单会出现，内容则被折开。类似于下面这样子。 然后点击菜单跳转之后左边的菜单子弹自动收起来。或者再次点击上面的按钮，同样左边收起来，内容就完整显示了。 这个在web页 ...

  • CSS3下拉菜单模板下载

    HTML5 和 CSS3 目前是属于比较流行的趋势，所以，有研空或者做前端的同学可以下载下来看下，今天收集分享：48个免费的HTML5和CSS3下拉菜单模板下载，希望其中有你喜欢和需要的，或者可以给你带来灵感的。 Dark Menu: Pu ...

  • CSS揭秘之沿着环形路径运动的动画

    《CSS揭秘》里面发现一个很独特的一个动画，使用纯CSS3动画让一个元素沿着环形路径运动。听起来有点不可思议，本文将带你一起走进作者的文章中，由复杂到简单，由多个结构到简单结构解剖CSS3语句实现环形运动。

  • H5 直播的疯狂点赞动画是如何实现的？

    平常我们再直播间看到比较炫酷的H5点赞动画是如何实现的呢？本文分享了两种方法，分别用CSS3和Canvas实现，最后附上源码，值得收藏。

关注我

我的微信公众号：前端开发博客，在后台回复以下关键字可以获取资源。

  • 回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识，加我微信:caibaojian89 交流