18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

CSS3制作圆环进展动漫实际效果

2020-11-17分享 "> ">

今日就关键解读这一实际效果,最先,当有些人说你可以不可以做一个圆形进展条实际效果出去时,假如是静态数据详细圆形进展条,那麼就非常简单了:

.circleprogress{
 width: 160px;
 height: 160px;
 border:20px solid red;
 border-radius: 50%;
}
随后便会说,这非常简单嘛。可是假如并不是详细圆形的呢?想想想:

.circleprogress{
 width: 160px;
 height: 160px;
 border:20px solid red;
 border-left:20px solid transparent;
 border-bottom:20px solid transparent;
 border-radius: 50%;
}
随后還是要说,这一都不难啦。但是,假如并不是恰好全是45度的倍率呢?

OK,大家先设定一个200x200的方块,随后大家在这里里边进行大家的实际效果:

.circleProgress_wrapper{
 width: 200px;
 height: 200px;
 margin: 50px auto;
 position: relative;
 border:1px solid #ddd;
}
接下去我将在这里个器皿里再放2个矩形框,每一个矩形框都占一半:

 div >
.wrapper{
 width: 100px;
 height: 200px;
 position: absolute;
 top:0;
 overflow: hidden;
.right{
 right:0;
.left{
 left:0;
}
这儿关键说一下.wrapper 的overflow:hidden; 起着重要性功效。这2个矩形框都设定了外溢掩藏,那麼当我们们去转动矩形框里边的圆形的情况下,外溢一部分就被掩藏没了,那样大家便可以做到大家要想的实际效果。

从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;
}
能看到,实际效果早已出去了,实际上原本是一个半圆弧,但因为大家设定了上面框和右侧框,因此上面框有一半外溢而被掩藏了,因此大家能够根据转动足以复原:

.circleProgress{
 width: 160px;
 height: 160px;
 border:20px solid transparent;
 border-radius: 50%;
 position: absolute;
 top:0;
 -webkit-transform: rotate(45deg);
}
因此要是转动自身要想的视角便可以完成随意占比的进展条。接下去把左半圆弧也完成,变为一个全圆:

.leftcircle{
 border-bottom:20px solid green;
 border-left:20px solid green;
 left:0;
}
随后,便是让它动一动,基本原理是那样的, 先让右半圆弧转动180度,再让左半圆弧转动180度 ,那样,2个半圆弧因为依次都所有外溢而消退了,因此看上去便是进展条再翻转的实际效果:

//
 .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{
 -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);
}
自然,大家只必须调节一下视角便可以完成反方向的实际效果:

 .circleProgress{
 width: 160px;
 height: 160px;
 border:20px solid transparent;
 border-radius: 50%;
 position: absolute;
 top:0;
 -webkit-transform: rotate(-135deg);
@-webkit-keyframes circleProgressLoad_right{
 -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);
}
好的,接下去便是冲向最后实际效果了,如同大家一刚开始见到的那般,有点儿像大家应用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{
 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{
 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);
}
"> ">
在线咨询