本站已不再更新,最新資源請前往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 百度收錄：本文已被百度收錄點擊查看詳情！

本文到此結束

總結

以上是生活随笔為你收集整理的css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。