自己写的光圈动画

.circle_normal {
     18px;
    height: 18px;
    margin: 0 auto;
    background: #45de3c;
    cursor: pointer;
    display: inline-block;
    position: relative;
    border-radius: 50%;
}

 .circle_normal:after {
    content: '';
    position: absolute;
     70px;
    height: 70px;
    border-radius: 50%;
    /*border:1px solid rgba(69, 222, 60,0.3);*/
    /*box-shadow: 0 0 1px 1px rgba(69, 222, 60,0.5);*/
    top: 50%;
    left: 50%;
    margin-top: -35px;
    margin-left: -38px;
    z-index: 3;
    opacity: 1;
     -webkit-animation: halo 2s infinite linear;
    -moz-animation: halo 2s infinite linear;
    animation: halo 2s infinite linear; 
} 
 .circle_normal:before {
    content: '';
    position: absolute;
     70px;
    height: 70px;
    border-radius: 50%;
    /*border:1px solid rgba(69, 222, 60,0.3);*/
    /*box-shadow: 0 0 1px 1px rgba(69, 222, 60,0.5);*/
    top: 50%;
    left: 50%;
    margin-top: -35px;
    margin-left: -38px;
    z-index: 3;
    opacity: 1;
    -webkit-animation: haloo 2s infinite linear;
    -moz-animation: haloo 2s infinite linear;
    animation: haloo 2s infinite linear;
} 
 @-webkit-keyframes halo {
        0% {
            opacity: 0;
            -webkit-transform: scale(0.1,0.1);
        }
        100% {
            opacity: 1;
            box-shadow: 0 0 1px 4px rgba(69, 222, 60,1);
            -webkit-transform: scale(1,1);
        }
    }
    @keyframes halo {
        0% {
            opacity: 0;
            transform: scale(0.1,0.1);
        }
        100% {
            opacity: 1;
            box-shadow: 0 0 1px 4px rgba(69, 222, 60,1);
            transform: scale(1,1);
        }
    }
 @-webkit-keyframes haloo {
        0% {
            opacity: 1;
            box-shadow: 0 0 1px 4px rgba(69, 222, 60,1);
            -webkit-transform: scale(1,1);
        }
        100% {
            opacity: 0;
            box-shadow: 0 0 1px 2px rgba(69, 222, 60,0.2);
            -webkit-transform: scale(1.4,1.4);
        }
    }
    @keyframes haloo {
        0% {
            opacity: 1;
            box-shadow: 0 0 1px 4px rgba(69, 222, 60,1);
            transform: scale(1,1);
        }
        100% {
            opacity: 0;
            box-shadow: 0 0 1px 2px rgba(69, 222, 60,0.2);
            transform: scale(1.4,1.4);
        }
    }