javascript - 這個(gè)描邊動(dòng)畫效果是怎么實(shí)現(xiàn)的呢？
問題描述
鼠標(biāo)懸停在上面就會(huì)出現(xiàn)這個(gè)類似描邊效果，純css可以實(shí)現(xiàn)嗎？想實(shí)現(xiàn)一樣的效果具體怎么弄呢？
問題解答
回答1：開始我想嘗試用偽類來實(shí)現(xiàn)，但z-index好像沒辦法處理，所以就這樣模擬了。demo
<style type='text/css'>.btn{ position: relative; height: 45px; width: 200px; background: #fff; color: #6cf; text-align: center; line-height: 45px; -webkit-box-sizing:border-box; box-sizing:border-box; margin: 0 auto; border: 1px solid #ccc;}.b-l{ position: absolute; content: ''; display: block; width: 0px; height: 1px; left: -1px; top: -2px; background: #6cf; z-index: -1; -webkit-transition:width 1s linear 2s,height 0.5s linear 1.5s; transition:width 1s linear 2s,height 0.5s linear 1.5s;}.b-r{ position: absolute; content: ''; display: block; width: 0px; height: 1px; right: -1px; bottom: -2px; background: #6cf; z-index: -1; -webkit-transition:width 1s linear 0.5s,height 0.5s linear; transition:width 1s linear 0.5s,height 0.5s linear;}.btn:hover .b-l{ -webkit-transition:width 1s linear,height 0.5s linear 1s; transition:width 1s linear,height 0.5s linear 1s; width: 201px; height: 46px;}.btn:hover .b-r{ -webkit-transition:width 1s linear 1.5s,height 0.5s linear 2.5s; transition:width 1s linear 1.5s,height 0.5s linear 2.5s; width: 201px; height: 46px;}</style><body><p class='btn'> <p class='b-l'></p> <p class='b-r'></p> btn</p></body>回答2：
可以實(shí)現(xiàn) 主要依靠animation-delay屬性，可以自行搜索下
回答3：是SVG吧。
相關(guān)文章：
1. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””2. Span標(biāo)簽3. css - 求推薦適用于vue2的框架 像bootstrap這種類型的4. docker-machine添加一個(gè)已有的docker主機(jī)問題5. java - Collections類里的swap函數(shù)，源碼為什么要新定義一個(gè)final的List型變量l指向傳入的list？6. css - 關(guān)于div自適應(yīng)問題，大家看圖吧，說不清7. android新手一枚，android使用httclient獲取服務(wù)器端數(shù)據(jù)失敗，但是用java工程運(yùn)行就可以成功獲取。8. angular.js使用$resource服務(wù)把數(shù)據(jù)存入mongodb的問題。9. redis啟動(dòng)有問題？10. SessionNotFoundException：會(huì)話ID為null。調(diào)用quit（）后使用WebDriver嗎？（硒）
網(wǎng)公網(wǎng)安備