css如何实现这样的秒变效果呢
不用给这种复杂的图形描边，只要给一个p的border描边就行
当鼠标进入就给这个p的border加一个描边的效果，现在是直接的显示隐藏，感觉不好看。
求大神给一个demo或者方法，谢谢了先！
业精于勤，荒于嬉;行成于思，毁于随。
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
Just use svg like this svg stroke animation
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
<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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The new feature animation of CSS3 should be able to solve this problem. Or you can do this,
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
Just use svg like this svg stroke animation
css
It is to change the color of the border when p is in hover state