css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...

本站已不再更新,最新资源请前往zcjun.com获取!

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

}

}

其实这个还可以定位一个div当border使用，然后靠scale缩放也是一样的效果，看自己喜欢了。

本文标签：这篇文章木有标签 版权声明：若无特殊注明，本文皆为《 子成君 》原创，转载请保留文章出处。 本文链接：css动画效果：鼠标移上去底部线条从中间往两边延伸 https://old.zcjun.com/learn/516.html 百度收录：本文已被百度收录点击查看详情！

本文到此结束