css3 - css如何實現素描描邊效果

問題描述

css如何實現這樣的秒變效果呢

不用給這種復雜的圖形描邊，只要給一個p的border描邊就行

當鼠標進入就給這個p的border加一個描邊的效果，現在是直接的顯示隱藏，感覺不好看。

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

問題解答

css3的新版特性動畫應該可以解決?；蛘咭部梢赃@樣、

<p> <img src='http://www.wxshucaidpc.com/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

幽靈按鈕或者按鈕動畫。

理論就是用span代替4個border。然后用css3或者jq來寫動畫

這種直接svg吧 svg描邊動畫

css

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

就是p hover狀態時，改變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>