【前端小技巧】CSS3实现环形进度条
前端设计肯定会遇到进度条的问题，很多人直接使用js插件，需要引入js文件，增加页面承载量，容易引起冲突。
实现起来很简单，只需要简单的HTML5和CSS3代码即可。
效果图：
html代码：
<div class="rect-box">
<div class="rect left">
<div class="circle"></div>
</div>
<div class="rect right">
<div class="circle"></div>
</div>
</div>css代码：
.rect-box{
width: 200px;
height: 200px;
/*border: 1px solid #ccc;*/
box-sizing: border-box;
position: relative;
}
.rect{
width: 100px;
height: 200px;
box-sizing: border-box;
position: absolute;
overflow:hidden;
top: 0;
}
.left{
left: 0;
}
.right{
right: 0;
}
.rect > div{
width: 200px;
height: 200px;
border:20px solid transparent;
border-radius: 50%;
box-sizing: border-box;
position: absolute;
top:0;
z-index: 3;
transform: rotate(45deg);
}
.right .circle{
border-top:20px solid #666;
border-right:20px solid #666;
border-left:20px solid rgb(81, 197, 81);
border-bottom:20px solid rgb(81, 197, 81);
right:0;
-webkit-animation: right 5s linear infinite;
}
.left .circle{
border-bottom:20px solid #666;
border-left:20px solid #666;
left:0;
-webkit-animation: left 5s linear infinite;
}
@-webkit-keyframes right{
0%{
border-left:20px solid rgb(182, 239, 182);
border-bottom:20px solid rgb(182, 239, 182);
-webkit-transform: rotate(45deg);
}
50%{
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 left{
0%{
border-top:20px solid rgb(81, 197, 81);
border-right:20px solid rgb(81, 197, 81);
-webkit-transform: rotate(45deg);
}
50%{
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;
-webkit-transform: rotate(225deg);
}
}作者 | 大神神码 | 蚂蚁开源社区大神，资深开发工程师
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-09-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读