已解決430363個問題，去搜搜看，總會有你想問的

http://www.jq22.com/ ，導航欄特效如何完成的？

關注

首頁猿問 http://www.jq22.c...

JavaScript

一只斗牛犬 2018-09-05 15:19:03

該網站首頁導航欄有一特效如下：鼠標移動到 li 上面，然后li邊框依次變長，位置該li轉一圈，我通過F12 查詢頁面元素，發現li中沒有任何的其他多余的元素，不知道是如何完成的？難道現在可以設置元素的邊框長度了？

查看完整描述

1 回答

萬千封印

TA貢獻1891條經驗獲得超3個贊

通過控制a標簽的偽元素實現的，
::after負責上邊框線和右邊邊框線，
::before負責下邊邊框線和左邊邊框線

.c-btn--border-line:hover::after {

border-right-color: #367dff;

border-top-color: #367dff;

transition: width 0.2s ease-out 0s, height 0.2s ease-out 0.2s;

}

.c-btn--border-line:hover::before {

border-bottom-color: #367dff;

border-left-color: #367dff;

transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;

}

transition的最后一個參數是延時時間，分別是0s，0.2s,0.4s,0.6s；每條線的動畫執行時間剛好是0.2s，所以就有旋轉一圈的效果了

反對回復 2018-10-24

關注

舉報

0/150

提交

取消