css3外扩动画 css3圆形动画缩略图
<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
    }
}

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注