标签：opacity scale 0.0 transform 动效 animation 扩散 border
上gif
简单分析一下
1.旋转的线，我们设置他的旋转位置从他的左下开始转动就ok了，再把最中的的圆层级设置高一点，就可以遮挡住线的一部分，看起来就是旋转的线在绕着中心的圆旋转。
2.闪现的点，控制百分比来实现展示顺序，比如我设置的3s要执行完一次闪烁。
上代码
html结构如下
<div class="no-warning" v-show="true">
//这是最外层圆形扩散
<div class="out-circle"></div>
<div class="w1">
//这是旋转的那个线
<div class="line"></div>
//这是跟着线走的阴影
<div class="cir-shadow">
//这是一层层圆
<div class="w2">
<div class="w3">
<div class="w4">
</div>
</div>
</div>
</div>
</div>
//这些都是闪烁的圆
<div class="circle1">
<div class="c1-1"></div>
<div class="c1-2"></div>
<div class="c1-3"></div>
<div class="c1-4"></div>
</div>
<div class="circle2">
<div class="c2-1"></div>
<div class="c2-2"></div>
<div class="c2-3"></div>
<div class="c2-4"></div>
</div>
<div class="circle3">
<div class="c3-1"></div>
<div class="c3-2"></div>
<div class="c3-3"></div>
<div class="c3-4"></div>
</div>
</div>
css结构如下
.no-warning {
position: relative;
overflow: hidden;
width: 400px;
height: 88%;
background: #1E1E3A;
border-radius: 18px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.no-warning .w1 {
width: 250px;
height: 250px;
position: relative;
/*border: 1px solid rgba(1, 234, 159, .1);*/
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.no-warning .out-circle {
width: 350px;
height: 350px;
opacity: 0;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
border: 1px solid rgba(1, 234, 159, .1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: cirlce 3s infinite;
-webkit-animation: cirlce 3s infinite;
}
@keyframes cirlce {
0% {
transform: scale(0.0);
opacity: 0.0;
}
30% {
transform: scale(0.1);
opacity: 0.0;
}
60% {
transform: scale(1);
opacity: 1;
}
90% {
transform: scale(1);
opacity: 0;
}
100% {
transform: scale(0);
opacity: 0.0;
}
}
.no-warning .w2 {
width: 190px;
height: 190px;
border: 1px solid rgba(1, 234, 159, .4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
/*background: conic-gradient(from 0deg at 50% 50%, rgba(133, 229, 198, 0) -0.14deg, rgba(133, 229, 198, 0) 256.04deg, rgba(133, 229, 198, 0.5) 359.86deg, rgba(133, 229, 198, 0) 359.86deg, rgba(133, 229, 198, 0) 616.04deg);*/
/*animation-duration: 3s; !* 动画时间 *!*/
/*animation-name: rotateLine; !* 关键帧名字 *!*/
/*animation-timing-function: linear; !* 动画时间函数 *!*/
/*animation-iteration-count: infinite; !* 让动画永远执行下去 *!*/
}
.no-warning .cir-shadow {
width: 190px;
height: 190px;
border-radius: 50%;
background: conic-gradient(from 0deg at 50% 50%, rgba(133, 229, 198, 0) -0.14deg, rgba(133, 229, 198, 0) 256.04deg, rgba(133, 229, 198, 0.5) 359.86deg, rgba(133, 229, 198, 0) 359.86deg, rgba(133, 229, 198, 0) 616.04deg);
animation-duration: 3s; /* 动画时间 */
animation-name: rotateLine; /* 关键帧名字 */
animation-timing-function: linear; /* 动画时间函数 */
animation-iteration-count: infinite; /* 让动画永远执行下去 */
}
.no-warning .w3 {
width: 130px;
height: 130px;
border: 1px solid rgba(1, 234, 159, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.no-warning .w4 {
width: 70px;
height: 70px;
border: 1px solid #85E5C6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #1E1E3A;
z-index: 1;
}
.no-warning .line {
width: 2px;
height: 94px;
background-color: #01EA9F;
position: absolute;
/*left: 50%;*/
top: 31.5px;
transform-origin: bottom left; /* 已左下角为中心旋转 */
animation-duration: 3s; /* 动画时间 */
animation-name: rotateLine; /* 关键帧名字 */
animation-timing-function: linear; /* 动画时间函数 */
animation-iteration-count: infinite; /* 让动画永远执行下去 */
}
@keyframes rotateLine {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.no-warning .circle1 {
position: absolute;
left: 277px;
top: 40%;
width: 35px;
height: 35px;
}
.no-warning .circle1 .c1-1 {
width: 7px;
height: 7px;
background: #85E5C6;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
margin: auto;
animation: appear 3s infinite;
-webkit-animation: appear 3s infinite;
/*-webkit-animation-delay: 0.5s;*/
/*animation-delay: 0.5s;*/
}
@keyframes appear {
0% {
transform: scale(0.0);
opacity: 0.0;
}
30% {
transform: scale(0.0);
opacity: 0.0;
}
50% {
transform: scale(1);
opacity: 1;
}
70% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(0);
opacity: 0.0;
}
}
.no-warning .circle1 .c1-2 {
width: 23px;
height: 23px;
position: absolute;
border-radius: 50%;
border: 4px solid rgba(133, 229, 198, .1);
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
margin: auto;
-webkit-animation: appear2 3s infinite;
animation: appear2 3s infinite;
/*-moz-animation-delay: 0.5s; !* Firefox *!*/
/*-webkit-animation-delay: 0.5s; !* Safari 和 Chrome *!*/
/*animation-delay: 0.5s infinite;*/
}
@keyframes appear2 {
0% {
transform: scale(0.0);
opacity: 0.0;
}
30% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1);
opacity: 1;
}
70% {
transform: scale(1);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 0;
}
}
.no-warning .circle1 .c1-3 {
width: 35px;
height: 35px;
position: absolute;
border-radius: 50%;
border: 1px solid rgba(133, 229, 198, .11);
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
margin: auto;
animation: appear2 3s ease-in infinite;
}
.no-warning .circle1 .c1-4 {
width: 35px;
height: 35px;
position: absolute;
border-radius: 50%;
border: 1px solid rgba(133, 229, 198, .11);
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
margin: auto;
-webkit-animation: appear3 3s ease-in infinite;
animation: appear3 3s ease-in infinite;
}
@keyframes appear3 {
0% {
transform: scale(0.0);
opacity: 0.0;
}
10% {
transform: scale(0.0);
opacity: 0.0;
}
30% {
transform: scale(1);
opacity: 1;
}
40% {
transform: scale(1);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 0;
}
}
/*第二个查找圆点*/
.no-warning .circle2 {
position: absolute;
left: 64px;
top: 20%;
width: 19px;
height: 19px;
}
.no-warning .circle2 .c2-1 {
width: 3px;
height: 3px;
background: #85E5C6;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
margin: auto;
animation: appear2-1 3s infinite;
-webkit-animation: appear2-1 3s infinite;
/*-webkit-animation-delay: 0.5s;*/
/*animation-delay: 0.5s;*/
}
@keyframes appear2-1 {
0% {
transform: scale(0.0);
opacity: 0.0;
}
20% {
transform: scale(0.0);
opacity: 0.0;
}
40% {
transform: scale(1);
opacity: 1;
}
60% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(0);
opacity: 0.0;
}
}
.no-warning .circle2 .c2-2 {
width: 11px;
height: 11px;
position: absolute;
border-radius: 50%;
border: 1px solid rgba(133, 229, 198, .1);
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
margin: auto;
-webkit-animation: appear2-2 3s infinite;
animation: appear2-2 3s infinite;
/*-moz-animation-delay: 0.5s; !* Firefox *!*/
/*-webkit-animation-delay: 0.5s; !* Safari 和 Chrome *!*/
/*animation-delay: 0.5s infinite;*/
}
@keyframes appear2-2 {
0% {
transform: scale(0.0);
opacity: 0.0;
}
20% {
transform: scale(0);
opacity: 0;
}
40% {
transform: scale(1);
opacity: 1;
}
60% {
transform: scale(1);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 0;
}
}
.no-warning .circle2 .c2-3 {
width: 19px;
height: 19px;
position: absolute;
border-radius: 50%;
border: 1px solid rgba(133, 229, 198, .11);
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
margin: auto;
animation: appear2-2 3s ease-in infinite;
}
.no-warning .circle2 .c2-4 {
width: 19px;
height: 19px;
position: absolute;
border-radius: 50%;
border: 1px solid rgba(133, 229, 198, .11);
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
margin: auto;
-webkit-animation: appear2-3 3s ease-in infinite;
animation: appear2-3 3s ease-in infinite;
}
@keyframes appear2-3 {
0% {
transform: scale(0.0);
opacity: 0.0;
}
20% {
transform: scale(1);
opacity: 1;
}
40% {
transform: scale(1);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 0;
}
}
/*第三个查找圆点*/
.no-warning .circle3 {
position: absolute;
left: 52px;
top: 80%;
width: 31px;
height: 31px;
}
.no-warning .circle3 .c3-1 {
width: 5px;
height: 5px;
background: #85E5C6;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
margin: auto;
animation: appear3-1 3s infinite;
-webkit-animation: appear3-1 3s infinite;
/*-webkit-animation-delay: 0.5s;*/
/*animation-delay: 0.5s;*/
}
@keyframes appear3-1 {
0% {
transform: scale(0.0);
opacity: 0.0;
}
40% {
transform: scale(0.0);
opacity: 0.0;
}
60% {
transform: scale(1);
opacity: 1;
}
80% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(0);
opacity: 0.0;
}
}
.no-warning .circle3 .c3-2 {
width: 15.11px;
height: 15.11px;
position: absolute;
border-radius: 50%;
border: 2.62857px solid rgba(133, 229, 198, .1);
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
margin: auto;
-webkit-animation: appear3-2 3s infinite;
animation: appear3-2 3s infinite;
/*-moz-animation-delay: 0.5s; !* Firefox *!*/
/*-webkit-animation-delay: 0.5s; !* Safari 和 Chrome *!*/
/*animation-delay: 0.5s infinite;*/
}
@keyframes appear3-2 {
0% {
transform: scale(0.0);
opacity: 0.0;
}
40% {
transform: scale(0);
opacity: 0;
}
60% {
transform: scale(1);
opacity: 1;
}
80% {
transform: scale(1);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 0;
}
}
.no-warning .circle3 .c3-3 {
width: 31px;
height: 31px;
position: absolute;
border-radius: 50%;
border: 1px solid rgba(133, 229, 198, .11);
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
margin: auto;
animation: appear3-2 3s ease-in infinite;
}
.no-warning .circle3 .c3-4 {
width: 31px;
height: 31px;
position: absolute;
border-radius: 50%;
border: 1px solid rgba(133, 229, 198, .11);
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
margin: auto;
-webkit-animation: 3s ease-in infinite;
animation: appear3-3 3s ease-in infinite;
}
@keyframes appear3-3 {
0% {
transform: scale(0.0);
opacity: 0.0;
}
20% {
transform: scale(0.0);
opacity: 0.0;
}
40% {
transform: scale(1);
opacity: 1;
}
60% {
transform: scale(1);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 0;
}
}
标签：opacity,scale,0.0,transform,动效,animation,扩散,border 来源： https://blog.csdn.net/qq_42177478/article/details/120334730
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。