javascript - 這個描邊動畫效果是怎么實現的呢？
問題描述
鼠標懸停在上面就會出現這個類似描邊效果，純css可以實現嗎？想實現一樣的效果具體怎么弄呢？
問題解答
回答1：開始我想嘗試用偽類來實現，但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：
可以實現 主要依靠animation-delay屬性，可以自行搜索下
回答3：是SVG吧。
相關文章：
1. mac連接阿里云docker集群，已經卡了2天了，求問？2. javascript - js 有什么優雅的辦法實現在同時打開的兩個標簽頁間相互通信？3. java - spring-data Jpa 不需要執行save 語句，Set字段就可以自動執行保存的方法？求解4. css3 - 在sublime text里， 如何讓emmet生成的帶前綴css屬性垂直對齊？5. css3 - Typecho 后臺部分表單按鈕在 Chrome 下出現靈異動畫問題，求解決6. html5和Flash對抗是什么情況？7. javascript - 一個抽獎的效果（如圖）？8. javascript - weex和node,js到底是怎樣一個關系呢？9. javascript - 求解答，koa-bodyparser獲取到的參數是空對象，為什么？？？？？10. 想找個php大神仿個網站。
網公網安備