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

问题描述

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

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

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

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

问题解答

css3的新版特性动画应该可以解决。或者也可以这样、

<p> <img src='https://www.haobala.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>