实现思想：
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:200px;
?????height:200px;
?????margin: 0 auto;
?????position: relative;
?????overflow: hidden;
?????border-radius: 50%;
???}
???.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遮盖展示出来的部分作为倒计时的线条) */
?????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: 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: 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);
???????}
???}
css实现圆形倒计时效果
原文地址：https://www.cnblogs.com/sunchundong/p/9760153.html