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. javascript - immutable配合react提升性能?2. javascript - sublime快鍵鍵問題3. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~4. 配置Apache時,添加對PHP的支持時語法錯誤5. phpstudy8.1支持win11系統嗎?6. javascript - nodejs關于進程間發送句柄的一點疑問7. javascript - 移動端上不能實現拖拽布局嗎?8. 實現bing搜索工具urlAPI提交9. Apache 已經把網站根目錄的改為allow from all了,但是服務器還是不能訪問?10. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化

網公網安備