前言:有时,我们会见一些圆形的进度条,随着进度条的推进,进行倒计时的变化。
若是只实现一个圆环的话,只用border和border-radius就能画出来。
但是这样的圆环不能动,产生进度条效果的重要因素就是得从0 开始变化,而不是一个完整的圆环在旋转。所以,实现的思路如下:
1.把整个圆环分成左右两部分;
2.左右两部分都有半个圆环在旋转,比如先让右边的半圆环,旋转到正好接住了左半部分,然后左边的半圆环开始旋转。
一、实现步骤
1.画右半圆环
首先,应该是一个div包裹着一个div。父div他的宽度应该是子div宽度的一半。这样给子div一个border-radius,给父div一个overflow:hidden,这样正好会是一个半圆。
先实现右半部分,html结构如下:
<div class="circle_process">
<div class="wrapper right">
<div class="circle rightcircle"></div>
</div>
</div>
里面的rightcircle是半个圆环,样式如下:
.circle_process{
position:relative;
width:47px;
height:48px;
background:#ffffff;
border-radius:50%;
}
.circle_process .wrapper{
width:24px;
height:48px;
position:absolute;
top:0;
overflow:hidden;
}
.circle_process .rightcircle{
border-top:1px solid #1390eb;
border-right:1px solid #1390eb;
right:0px;
-webkit-animation:circle_right 5s linear infinite;
}
.circle_process .circle{
width:48px;
height:48px;
border:1px solid transparent;
border-radius:50%;
position:absolute;
top:0;
transform:rotate(-135deg);
}
2.画左半圆环
<div class="wrapper left">
<div class="circle leftcircle" id="leftcircle"></div>
</div>
.circle_process .left{
left:0;
}
.circle_progress .leftcircle{
border-bottom:1px solid #1390eb;
border-left:1px solid #1390eb;
left:0px;
-webkit-animation:circle_left 5s linear infinite;
}
3.两个半圆结合在一起
两个半圆结合在就是两个圆并排放,那么这两个半圆一个position:absolute,这样两个半圆浮动在文档流当中,就结合成一个圆。d
4.将两个半圆隐藏掉
如果是要求从0 到完整的一个倒计时,那么我们此时需要把这个圆隐藏掉,我们可以通过transform隐藏掉。因为父级的宽度是子集宽度的一半,所以我们可以计算出,当子集的圆旋转180度的时候,整个圆就不见,全都会通过hidden隐藏在外面。同理可得另一半边圆。
5.动画
一个从0-180度的一个动画。
.rightcircle{
-webkit-animation: circle_right; /*动画名称*/
-webkit-animation-duration: 5s; /*完成一个动画需要的时间*/
-webkit-animation-timing-function: linear; /*动画播放的方式,linear是匀速变化*/
-webkit-animation-iteration-count:infinite; /*动画播放的次数,infinite是无限次数*/
}
@-webkit-keyframes circle_right{
0%{
-webkit-transform:rotate(-135deg);
}
50%,100%{
-webkit-transform:rotate(45deg);
}
}
@-webkit-keyframes circle_left{
0%,50%{
-webkit-transform:rotate(-135deg);
}
100%{
-webkit-transform:rotate(45deg);
}
}
二、添加倒计时数字
<div class="circle_process" ng-click="skipStep()">
<div class="wrapper right">
<div class="circle rightcircle"></div>
</div>
<div class="wrapper left">
<div class="circle leftcircle" id="leftcircle"></div>
</div>
<div style="color:#1390EB;font-size: 14px;position: absolute;top:6px;left:16px;">
<span>{{timeNum}}</span>S
</div>
<div style="color:#1390EB;font-size: 14px;position: absolute;top:22px;left:11px;">
跳过
</div>
</div>
三、额外功能
现在,已经实现了一个圆形进度条,利用这个,可以实现倒计时:
//倒计时
$scope.countdown = 6;
function settime(){
if($scope.countdown == 1){
$scope.step = 2;
$scope.stepShow = false;
window.clearTimeout($scope.timer);
$scope.$apply();
return;
}else{
$scope.countdown--;
}
$scope.timer = setTimeout(function(){
settime();
},1000)
$scope.timeNum = $scope.countdown;
$scope.$apply();
}
现在,已经实现了一个圆形进度条,利用这个,可以实现一个小闹钟:
function getTime(){
var date = new Date();
var second = date.getSeconds();
var rightcircle = document.getElementById('rightcircle');
var leftcircle = document.getElementById('leftcircle');
var show = document.getElementById('show');
show.innerHTML = second;
if(second<=30){
rightcircle.style.cssText = "transform: rotate("+ (-135+6*second) +"deg)";
leftcircle.style.cssText = "transform: rotate(-135deg)";
}else{
rightcircle.style.cssText = "transform: rotate(45deg)";
leftcircle.style.cssText = "transform: rotate("+(-135+6*(second-30))+"deg)";
}
}
getTime();
setInterval(function(){
getTime();
},1000)
四、参考资料
如何只用CSS做倒计时效果 https://www.jianshu.com/p/938693fd3be2
使用CSS实现圆形进度条 https://www.xiabingbao.com/css/2015/07/27/css3-animation-circle.html