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. mysql 查詢身份證號字段值有效的數據2. python - 爬蟲模擬登錄后，爬取csdn后臺文章列表遇到的問題3. mysql - 把一個表中的數據count更新到另一個表里?4. javascript - 彈出一個子窗口，操作之后關閉，主窗口會得到相應的響應，例如網站的某些登錄界面，django后臺的管理等，這是怎么實現的呢？5. 視頻文件不能播放，怎么辦？6. 請教使用PDO連接MSSQL數據庫插入是亂碼問題?7. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ，會帶來哪些效率或者其他方面的好處8. python bottle跑起來以后,定時執行的任務為什么每次都重復(多)執行一次?9. android - 分享到微信，如何快速轉換成字節數組10. visual-studio - Python OpenCV: 奇怪的自動補全問題
網公網安備