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
}
}