SOURCE

console 命令行工具 X clear

                    
>
console
<div class="animation-wrap">
    <div class="animation-round animation-round"></div>
    <div class="animation-round animation-round"></div>
    <div class="animation-round animation-round"></div>
</div>
<style>
    .animation-wrap{
        background: #fff;
        position: relative;
        width: 100px;
        height: 100px;
    }
    .animation-round{
        width: 100px;
        height: 100px;
        background: rgba(0, 0, 255, 0);
        border-radius: 100px;
        position: absolute;
        left: 50%;top: 50%;
        margin-left: -50px;
        margin-top: -50px;
        animation: centerRotateTransition 3s linear infinite;
    }
    .animation-round:nth-child(2){
        animation: centerRotateTransition 3s linear 1s infinite;
    }
    .animation-round:nth-child(3){
        animation: centerRotateTransition 3s linear 2s infinite;
    }
    @keyframes centerRotateTransition {
        0% {transform: scale(0);background: rgba(0, 0, 255, 0);}
        10% {transform: scale(.5);background: rgba(0, 0, 255, .5);}
        90%{background: rgba(0, 0, 255, .1);}
        100% {transform: scale(1);background: rgba(0, 0, 255, 0);}
    }
</style>