css动画效果:鼠标移上去底部线条从中间往四周动画延伸
如图:
.top-nav a:after {
content: ' ';
position: absolute;
z-index: 2;
bottom: 0;
left: 50%;
display: block;
width: 165px;
height: 1px;
transform: translate(-50%);
}
.top-nav a:hover:after {
height: 2px;
animation: ad_width .5s linear forwards;
background: #ff8a00;
}
@keyframes ad_width {
from {
width: 0
}
to {
width: 165px
}
}