animation实现一个搜索扩散动效
作者：互联网
上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