实现思想：
1.最外层包裹内部的div1(.box)
2.内部左右两边div2(.left_box和.right_box)，宽度为div1的一半，通过overflow:hidden隐藏其内部的div
3.在左右两个div2中各有一个div3(.left_item和.right_item)，div3在div2中旋转，旋转超出div2后被隐藏实现倒计时的效果
4.遮罩div4(.mask),用来遮住中心部分，形成进度“条”的效果
css代码：
.box{ /* 最外层的盒子 */ width:200px; height:200px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 50%;
background-color: pink; } .left_box,.right_box{ /* 左右两边用于 隐藏 旋转的div的盒子 通过overflow来隐藏内部div旋转出去的部分 */ position: absolute; top: 0; width:100px; height:200px; overflow: hidden; z-index: 1; } .left_box{ left: 0; } .right_box{ right: 0; } .left_item,.right_item{ /*
这是需要旋转的div(没有被mask遮盖展示出来的部分作为倒计时的线条)
为了方便理解，下面用deeppink和cyan分别设置了左右两边div的颜色
*/ width: 100px; height: 200px; } .left_item{ /* 1.设置圆角，圆角大小为高度的一半 2.这只旋转的中心店，这是左边圆，中心点设置到右边中心点，右边圆则设置到左边中心点 */ border-top-left-radius: 100px; border-bottom-left-radius: 100px; -webkit-transform-origin: right center; transform-origin: right center; -webkit-animation: loading_left 3s linear; background-color: deeppink; } .right_item{ border-top-right-radius: 100px; border-bottom-right-radius: 100px; -webkit-transform-origin: left center; transform-origin: left center; -webkit-animation: loading_right 3s linear; background-color: cyan; } .mask{ /* 遮住div多余的部分，呈现出线条的效果 */ position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; z-index: 2; border-radius: 50%; background-color: #fff; } @-webkit-keyframes loading_left{ 0%{ -webkit-transform: rotate(0deg); } 50%{ -webkit-transform: rotate(0deg); } 100%{ -webkit-transform: rotate(180deg); } } @-webkit-keyframes loading_right{ 0%{ -webkit-transform: rotate(0deg); } 50%{ -webkit-transform: rotate(180deg); } 100%{ -webkit-transform: rotate(180deg); } }
html代码：
<div class="box"> <div class="left_box"> <div class="left_item"></div> </div> <div class="right_box"> <div class="right_item"></div> </div> <div class="mask"></div> </div>
.box{
/* 最外层的盒子 */
background:
pink;
width:
200
px;
height:
200
px;
margin:
0
auto;
position:
relative;
overflow:
hidden;
border-radius:
50
%;
}
.left_box,
.right_box{
/*
左右两边用于 隐藏 旋转的div的盒子
通过overflow来隐藏内部div旋转出去的部分
*/
position:
absolute;
top:
0;
width:
100
px;
height:
200
px;
overflow:
hidden;
z-index:
1;
}
.left_box{
left:
0;
}
.right_box{
right:
0;
}
.left_item,
.right_item{
/* 这是需要旋转的div(没有被mask遮盖展示出来的部分作为倒计时的线条) */
width:
100
px;
height:
200
px;
}
.left_item{
/*
1.设置圆角，圆角大小为高度的一半
2.这只旋转的中心店，这是左边圆，中心点设置到右边中心点，右边圆则设置到左边中心点
*/
border-top-left-radius:
100
px;
border-bottom-left-radius:
100
px;
-webkit-transform-origin:
right
center;
transform-origin:
right
center;
-webkit-animation: loading_left
3
s
linear;
background:
deeppink;
}
.right_item{
border-top-right-radius:
100
px;
border-bottom-right-radius:
100
px;
-webkit-transform-origin:
left
center;
transform-origin:
left
center;
-webkit-animation: loading_right
3
s
linear;
background:
cyan;
}
.mask{
/* 遮住div多余的部分，呈现出线条的效果 */
position:
absolute;
top:
15
px;
left:
15
px;
right:
15
px;
bottom:
15
px;
z-index:
2;
border-radius:
50
%;
background-color:
#fff;
}
@-webkit-keyframes
loading_left{
0%{
-webkit-transform:
rotate(
0
deg);
}
50%{
-webkit-transform:
rotate(
0
deg);
}
100%{
-webkit-transform:
rotate(
180
deg);
}
}
@-webkit-keyframes
loading_right{
0%{
-webkit-transform:
rotate(
0
deg);
}
50%{
-webkit-transform:
rotate(
180
deg);
}
100%{
-webkit-transform:
rotate(
180
deg);
}
}