css3 - css如何实现素描描边效果

Question

css如何实现这样的秒变效果呢

不用给这种复杂的图形描边，只要给一个p的border描边就行

当鼠标进入就给这个p的border加一个描边的效果，现在是直接的显示隐藏，感觉不好看。

求大神给一个demo或者方法，谢谢了先！

Answer 1

css3的新版特性動畫應該可以解決。或也可以這樣、

<p>
    <img src="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來寫動畫

Answer 2

這種直接svg吧 svg描邊動畫

Answer 3

css

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

就是p hover狀態時，改變border的顏色

Answer 4

雷雷