第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

http://www.jq22.com/ ，導(dǎo)航欄特效如何完成的？

http://www.jq22.com/ ，導(dǎo)航欄特效如何完成的？

一只斗牛犬 2018-09-05 15:19:03
該網(wǎng)站首頁導(dǎo)航欄有一特效如下 ：鼠標(biāo)移動到 li 上面 ，然后li邊框依次變長，位置該li轉(zhuǎn)一圈 ， 我通過F12 查詢頁面元素，發(fā)現(xiàn)li中沒有任何的其他多余的元素，不知道是如何完成的 ？ 難道現(xiàn)在可以設(shè)置 元素的邊框長度了 ？
查看完整描述

1 回答

?
萬千封印

TA貢獻(xiàn)1891條經(jīng)驗 獲得超3個贊

通過控制a標(biāo)簽的偽元素實現(xiàn)的，
::after負(fù)責(zé)上邊框線和右邊邊框線，
::before負(fù)責(zé)下邊邊框線和左邊邊框線

.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的最后一個參數(shù)是延時時間，分別是0s，0.2s,0.4s,0.6s；每條線的動畫執(zhí)行時間剛好是0.2s，所以就有旋轉(zhuǎn)一圈的效果了


查看完整回答
反對 回復(fù) 2018-10-24
  • 1 回答
  • 0 關(guān)注
  • 461 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號