<div class="center ">
<div class="radar radar-animate abs-center"></div>
<div class="center-range range abs-center"><i class="dot"></i><i class="dot"></i><i class="dot"></i></div>
<div class="radar abs-center">
<img src="img/logo.svg" class="logo-abs abs-center">
</div>
</div>
.new-feature-container .center{
position: absolute;
width: 440px;
height: 440px;
top: 190px;
left: 50%;
transform: translateX(-50%);
z-index: 3
}
.new-feature-container .center:before {
-webkit-animation: inner-data-v-078c4fde 5s linear 2s infinite;
animation: inner-data-v-078c4fde 5s linear 2s infinite
}
.new-feature-container .center:after,.new-feature-container .center:before {
content: "";
position: absolute;
width: 120px;
height: 120px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 1px solid #e1edff;
border-radius: 50%;
z-index: 3
}
.new-feature-container .center:after {
-webkit-animation: outter-data-v-078c4fde 5s linear 1s infinite;
animation: outter-data-v-078c4fde 5s linear 1s infinite
}
@-webkit-keyframes inset-data-v-078c4fde {
0% {
width: 120px;
height: 120px;
opacity: 1
}
to {
width: 560px;
height: 560px;
opacity: 0
}
}
@keyframes inset-data-v-078c4fde {
0% {
width: 120px;
height: 120px;
opacity: 1
}
to {
width: 560px;
height: 560px;
opacity: 0
}
}
@-webkit-keyframes inner-data-v-078c4fde {
0% {
width: 120px;
height: 120px;
opacity: 1
}
to {
width: 560px;
height: 560px;
opacity: 0
}
}
@keyframes inner-data-v-078c4fde {
0% {
width: 120px;
height: 120px;
opacity: 1
}
to {
width: 560px;
height: 560px;
opacity: 0
}
}
@-webkit-keyframes outter-data-v-078c4fde {
0% {
width: 120px;
height: 120px;
opacity: 1
}
to {
width: 560px;
height: 560px;
opacity: 0
}
}
@keyframes outter-data-v-078c4fde {
0% {
width: 120px;
height: 120px;
opacity: 1
}
to {
width: 560px;
height: 560px;
opacity: 0
}
}