SOURCE

console 命令行工具 X clear

                    
>
console
<div class="navs">
  <a href="">123</a>
</div>
.navs a {
    display: block;
    float: left;
    width: 114px;
    height: 32px;
    font-size: 0;
    position: relative;
    z-index: 2;
}
.navs a:after {
    content: '';
    width: 114px; 
    height: 43px;
    position: absolute;
    bottom: -20px;
    left: 0;
    background: url(https://n.res.netease.com/pc/zt/20180516104610//img/nav/nav_gif_bf7383f.png) no-repeat;
    -webkit-animation: indexbtn2 .5s steps(18) both 300ms 0 ease;
    -moz-animation: indexbtn2 .5s steps(18) both 300ms 0 ease;
    -ms-animation: indexbtn2 .5s steps(18) both 300ms 0 ease;
    animation: indexbtn2 .5s steps(18) both 300ms 0 ease;
    -moz-animation: indexbtn2 .5s steps(18) both;
    -webkit-animation: indexbtn2 .5s steps(18) both;
    -o-animation: indexbtn2 .5s steps(18) both;
    -ms-animation: indexbtn2 .5s steps(18) both;
    animation: indexbtn2 .5s steps(18) both;
}
.navs a:hover:after {
    content: '';
    background: url(https://n.res.netease.com/pc/zt/20180516104610//img/nav/nav_gif_bf7383f.png) no-repeat;
    -webkit-animation: indexbtn .5s steps(18) both 300ms 0 ease;
    -moz-animation: indexbtn .5s steps(18) both 300ms 0 ease;
    -ms-animation: indexbtn .5s steps(18) both 300ms 0 ease;
    animation: indexbtn .5s steps(18) both 300ms 0 ease;
    -moz-animation: indexbtn .5s steps(18) both;
    -webkit-animation: indexbtn .5s steps(18) both;
    -o-animation: indexbtn .5s steps(18) both;
    -ms-animation: indexbtn .5s steps(18) both;
    animation: indexbtn .5s steps(18) both;
    width: 114px;
    height: 43px;
    position: absolute;
    bottom: -20px;
    left: 0;
}
@-webkit-keyframes indexbtn {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 0 bottom
    }
}

@-moz-keyframes indexbtn {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 0 bottom
    }
}

@-o-keyframes indexbtn {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 0 bottom
    }
}

@-ms-keyframes indexbtn {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 0 bottom
    }
}

@keyframes indexbtn {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 0 bottom
    }
}