問題描述

css如何實(shí)現(xiàn)這樣的秒變效果呢

不用給這種復(fù)雜的圖形描邊，只要給一個(gè)p的border描邊就行

當(dāng)鼠標(biāo)進(jìn)入就給這個(gè)p的border加一個(gè)描邊的效果，現(xiàn)在是直接的顯示隱藏，感覺不好看。

求大神給一個(gè)demo或者方法，謝謝了先！

問題解答

css3的新版特性動(dòng)畫應(yīng)該可以解決。或者也可以這樣、

<p> <img src='http://www.aoyou183.cn/wenda/xxx,jpg'/> <span class='top'></span> <span class='bootom'></span> <span class='left'></span> <span class='right'></span></p>

具體效果可以參考：http://www.jq22.com/yanshi1524

幽靈按鈕或者按鈕動(dòng)畫。

理論就是用span代替4個(gè)border。然后用css3或者jq來寫動(dòng)畫

這種直接svg吧 svg描邊動(dòng)畫

css

p{border:1px solid transparent}p:hover{boeder:1px solid gray}

就是p hover狀態(tài)時(shí)，改變border的顏色

<style type='text/css'>.box { width: 100px; height: 100px; padding: 10px; transition: box-shadow .6s;}.box:hover { box-shadow: 0 0 6px 1px red inset;}</style><p class='box'>p</p>