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

Question

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

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

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

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

Answer 1

The new feature animation of CSS3 should be able to solve this problem. Or you can do this,

<p>
    <img src="xxx,jpg"/>
    <span class="top"></span>
    <span class="bootom"></span>
    <span class="left"></span>
    <span class="right"></span>
</p>

For specific effects, please refer to:
http://www.jq22.com/yanshi1524

Ghost button or button animation.

The theory is to use span instead of 4 borders. Then use css3 or jq to write animation

Answer 2

Just use svg like this svg stroke animation

Answer 3

css

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

It is to change the color of the border when p is in hover state

Answer 4

<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>