$img: 'https://avatars.githubusercontent.com/u/8554143?v=4';

​

@import url(https://fonts.googleapis.com/css?family=Righteous);

.container {

    width: 200px;

    margin: 20px auto;

}

​

.avator {

    position: relative;

    width: 200px;

    height: 200px;

    border-radius: 50%;

    background: url($img) no-repeat center center;

    background-size: 100% 100%;

    &::after {

        content: "";

        position: absolute;

        // top: 10%;

        left: 0%;

        width: 100%;

        height: 100%;

        background: inherit;

        background-size: 100% 100%;

        border-radius: 50%;

        transform: scale(.95);

        // filter: blur(10px) brightness(80%) opacity(.8);

        z-index: -1;

        animation: filterChange 10s infinite linear;

    }

}

​

p {

    margin-top: 30px;

    text-align: center;

    font-size: 28px;

    font-family: Righteous;

}

​

@keyframes filterChange {

    0% {

        top: 0;

        filter: blur(0) brightness(101%) opacity(1);

    }

    40% {

        top: 10%;

        filter: blur(0) brightness(101%) opacity(1);

    }

    80% {

        top: 10%;

        filter: blur(10px) brightness(80%) opacity(.8);

    }

    100% {

        top: 10%;

        filter: blur(10px) brightness(80%) opacity(.8);

    }

}