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. python bottle跑起來以后,定時(shí)執(zhí)行的任務(wù)為什么每次都重復(fù)(多)執(zhí)行一次?2. python - 爬蟲模擬登錄后,爬取csdn后臺文章列表遇到的問題3. html5 - HTML代碼中的文字亂碼是怎么回事?4. 視頻文件不能播放,怎么辦?5. javascript - vue2如何獲取v-model變量名6. javascript - 求幫助 , ATOM不顯示界面!!!!7. mysql - 分庫分表、分區(qū)、讀寫分離 這些都是用在什么場景下 ,會(huì)帶來哪些效率或者其他方面的好處8. javascript - 為什么在谷歌控制臺 輸出1的時(shí)候,輸出的1立馬就不見了9. javascript - angular使從elastichearch中取出的文本高亮顯示,如圖所示10. javascript - ios返回不執(zhí)行js怎么解決?
